Sprawdź, czy dowolny element nadrzędny ma klasę używającą jQuery

Question

Czy jest jakiś sposób w jQuery do sprawdzenia, czyrodzic, grand-rodzic, super-grand-rodzic ma klasę.

Mam strukturę znaczników, który opuścił mnie robi tego typu rzeczy w kodzie:

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

Jednakże, dla czytelności kodu Chciałbym uniknąć tego rodzaju rzeczy. Czy jest jakikolwiek sposób, aby powiedzieć "jakikolwiek rodzic/dziadek/pradziadek ma tę klasę"?

Używam jQuery 1.7.2.

Answer 1

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

} 

Answer 2

Można użyć parents metody z określonym .class selektora i sprawdzić, czy któryś z nich pasuje do niego:

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

Answer 3

Istnieje wiele sposobów, aby filtrować przodków elementów.

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

Uwaga, closest()sposób obejmuje sam element podczas sprawdzania selektora.

Ewentualnie, jeśli masz unikalny selektor dopasowując $elem np #myElem, można użyć:

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

Jeśli chcesz dopasować element zależności którekolwiek z jej klasy przodka tylko dla celów stylizacji , wystarczy użyć reguły CSS:

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