javascript - buscar - Comprueba si algún ancestro tiene una clase usando jQuery

jquery replace html

Question

¿Hay alguna manera en jQuery de verificar si algún padre, abuelo, bisnieto tiene una clase?

Tengo una estructura de marcado que me ha dejado haciendo este tipo de cosas en el código:

$(elem).parent().parent().parent().parent().hasClass(''left'')

Sin embargo, para la legibilidad del código me gustaría evitar este tipo de cosas. ¿Hay alguna manera de decir "cualquier padre / abuelo / biznieto tiene esta clase"?

Estoy usando jQuery 1.7.2.

Answer 1

Hay muchas maneras de filtrar para antepasados ​​de elementos.

if ($elem.closest(''.parentClass'').length /* > 0*/) {/*...*/}
if ($elem.parents(''.parentClass'').length /* > 0*/) {/*...*/}
if ($elem.parents().hasClass(''parentClass'')) {/*...*/}
if ($(''.parentClass'').has($elem).length /* > 0*/) {/*...*/}
if ($elem.is(''.parentClass *'')) {/*...*/}

Cuidado , el método closest() incluye el elemento en sí mismo mientras busca el selector.

Alternativamente, si tiene un selector único que coincida con $elem , por ejemplo, #myElem , puede usar:

if ($(''.parentClass:has(#myElem)'').length /* > 0*/) {/*...*/}
if(document.querySelector(''.parentClass #myElem'')) {/*...*/}

Si desea hacer coincidir un elemento que dependa de cualquiera de sus clases antecesoras solo con fines de estilo, solo use una regla CSS :

.parentClass #myElem { /* CSS property set */ }

Answer 2

Puede usar el método de los parents con el selector .class especificado y verificar si alguno de ellos coincide con él:

if ($elem.parents(''.left'').length != 0) {
//someone has this class
}

Answer 3

if ($elem.parents(''.left'').length) {
}