Sprawdź, czy któryś z przodków ma klasę używającą jQuery

156

Czy istnieje sposób w jQuery, aby sprawdzić, czy jakiś rodzic, dziadek, pradziadek ma klasę?

Mam strukturę znaczników, która sprawiła, że w kodzie robię takie rzeczy:

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

Jednak ze względu na czytelność kodu chciałbym uniknąć tego rodzaju rzeczy. Czy istnieje sposób, aby powiedzieć, że „któryś z rodziców / dziadków / pradziadków ma tę klasę”?

Używam jQuery 1.7.2.

— crmpicco
źródło

stackoverflow.com/questions/16863917/… - na wypadek, gdyby ktoś chciał to zrobić bez jQuery

— Robert Niestroj

Odpowiedzi:

303

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

}

— Alex
źródło

Dzięki, właśnie tego potrzebowałem! Dla .lengthprzypomnienia , chociaż praktyka traktowania jako wartości zgodnej z prawdą jest dość płodna w JS, jest o wiele jaśniejsza i łatwiejsza do zrozumienia.length > 0

— dooleyo

Oto link do jQuery .parents () dokumentacji

— H Dog

Istnieje wiele sposobów filtrowania 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() metoda zawiera sam element podczas sprawdzania selektora.

Alternatywnie, jeśli masz unikalny selektor pasujący $elemnp. Do #myElem, możesz użyć:

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

Jeśli chcesz dopasować element zależny od jednej z jego klas nadrzędnych tylko w celu stylizacji, po prostu użyj reguły CSS :

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

— A. Wolff
źródło

Zaryzykowałbym stwierdzenie (bez testowania tego), że ta metoda jest lepsza. Elem.parents przejdzie przez całą strukturę domena nadrzędną, w której obiekt najbliższy () powinien (prawdopodobnie) zatrzymać się, gdy znajdzie najbliższego rodzica z tym elementem i dlatego jest bardziej wydajny. To niewykształcone przypuszczenie. Zwykle używam near (). Wygląda na to, że znalazłem nowy temat do zbadania na moim blogu! : P

— dudewad

@dudewad tak, ale to całkiem niedawno. To znaczy w starszej wersji jq, AFAIK, tak nie było. Pętla Parents nie została przerwana na pierwszym dopasowanym rodzicu przy użyciu funkcji near (), ale teraz tak jest. (nie wiem od której wersji jq, ale jestem prawie pewien, że mam rację w tym stwierdzeniu)

— A. Wolff

Dobrze wiedzieć, dzięki za informację. Dziwne, że nie zbudowali włamania od pierwszej wersji.

— dudewad

gdy nie ma rodziców do znalezienia, rodzice () są szybsi niż najbliżsi () jsperf.com/closest-vs-parents-foobar

— Alex

@Alex Rzeczywiście, dość intrygujące, dzięki za wejście! Przy okazji, ponowne przeczytanie pytania,Is there any way in jQuery to check if any parent,... , closest()czek na samego elementu, więc to nie jest tak naprawdę odpowiedzi na pytanie, PO mogłaby chcieć explecitely wykluczyć samego elementu, więc ya, odpowiedź była w użyciu.parents()

— A. Wolff

Możesz użyć parentsmetody z określonym .classselektorem i sprawdzić, czy któraś z nich do niego pasuje:

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

— Igor Dymov
źródło