Controlla se un antenato ha una classe che usa jQuery

Question

Esiste un modo in jQuery per verificare se qualsiasi genitore, nipote, pronipote genitore, genitore non protagonista, ha una classe.

Ho una struttura di markup che mi ha lasciato fare questo genere di cose nel codice:

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

Tuttavia, per la leggibilità del codice mi piacerebbe evitare questo genere di cose. C'è un modo per dire "qualsiasi genitore/nonno/pronipote ha questa classe"?

Sto usando jQuery 1.7.2.

Answer 1

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

} 

Answer 2

È possibile utilizzare parents metodo con specificato .class selettore e verificare se qualcuno di loro lo confronta:

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

Answer 3

Ci sono molti modi per filtrare per gli antenati degli elementi.

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 *')) {/*...*/} 

Attenzione, closest()metodo comprende dell'elemento stesso durante il controllo per selettore.

In alternativa, se si dispone di un selettore unico corrispondenti alla $elem, ad esempio #myElem, è possibile utilizzare:

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

Se si desidera far corrispondere un elemento a seconda qualsiasi sua classe antenata solo a scopo styling , basta utilizzare una regola CSS :

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