Compruebe si algún antepasado tiene una clase usando jQuery

156

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

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

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

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

Estoy usando jQuery 1.7.2.

— crmpicco
fuente

stackoverflow.com/questions/16863917/… - en caso de que alguien quiera hacerlo sin jQuery

— Robert Niestroj

Respuestas:

304

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

}

— Alex
fuente

Gracias, justo lo que necesitaba! Para el registro, si bien la práctica de tratar .lengthcomo un valor de verdad es bastante prolífica en JS, es mucho más clara y fácil de entender.length > 0

— dooleyo

Aquí está el enlace a jQuery .parents () Documentación

— H Perro

Hay muchas formas de filtrar por ancestros 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 closest() método incluye el elemento en sí mismo mientras se 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 dependiendo de cualquiera de sus clases ancestrales solo con fines de estilo, solo use una regla CSS :

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

— A. Wolff
fuente

Podría aventurarme a decir (sin probar esto) que este método es mejor. Elem.parents atravesará toda la estructura principal del padre, donde lo más cercano () debería (probablemente) detenerse una vez que encuentre el padre más cercano con ese elemento y, por lo tanto, sea más eficiente. Esta es una suposición sin educación. Usualmente uso el más cercano (). ¡Parece que encontré un nuevo tema para investigar en mi blog! : P

— dudewad

@dudewad sí, pero es bastante reciente. Quiero decir, en la versión anterior de jq, AFAIK, este no era el caso. El ciclo de los padres no se rompió en el primer padre emparejado usando el más cercano (), pero ahora lo es. (no sé desde qué versión de jq, pero estoy bastante seguro de que estoy en lo correcto en esta declaración)

— A. Wolff

Es bueno saberlo, gracias por la información. Extraño que no hubieran construido el robo desde la primera versión.

— dudewad

cuando no se encuentran padres, los padres () son más rápidos que los más cercanos () jsperf.com/closest-vs-parents-foobar

— Alex

@Alex ¡Muy interesante, gracias por la entrada! Por cierto, vuelva a leer la pregunta, Is there any way in jQuery to check if any parent,..., closest()de verificación para el elemento en sí por lo que este no es realmente responder a la pregunta, OP podría desear excluir explecitely el elemento en sí, por lo que ya, la respuesta fue usar.parents()

— A. Wolff

Puede usar el parentsmétodo con el .classselector especificado y verificar si alguno de ellos coincide:

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

— Igor Dymov
fuente