Überprüfen Sie mit jQuery, ob ein Vorfahr eine Klasse hat

156

Gibt es in jQuery eine Möglichkeit zu überprüfen, ob ein Elternteil, ein Großelternteil oder ein Urgroßelternteil eine Klasse hat?

Ich habe eine Markup-Struktur, die mich dazu veranlasst hat, solche Dinge im Code zu tun:

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

Aus Gründen der Lesbarkeit des Codes möchte ich jedoch solche Dinge vermeiden. Gibt es eine Möglichkeit zu sagen, dass "ein Elternteil / Großelternteil / Urgroßelternteil diese Klasse hat"?

Ich verwende jQuery 1.7.2.

— crmpicco
quelle

stackoverflow.com/questions/16863917/… - falls jemand es ohne jQuery machen möchte

— Robert Niestroj

Antworten:

303

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

}

— Alex
quelle

Danke, genau das, was ich brauchte! Für die Aufzeichnung, während die Praxis der Behandlung .lengthals wahrer Wert in JS ziemlich produktiv ist, ist es viel klarer und leichter zu verstehen.length > 0

— dooleyo

Hier ist der Link zur Dokumentation zu jQuery .parents ()

— H Dog

Es gibt viele Möglichkeiten, nach Elementvorfahren zu filtern.

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

Beachten Sie , dass die closest() Methode das Element selbst enthält, während Sie nach dem Selektor suchen.

Wenn Sie einen eindeutigen Selektor haben , der $elemmit z. B. übereinstimmt , #myElemkönnen Sie alternativ Folgendes verwenden:

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

Wenn Sie ein Element, das von einer seiner Vorfahrenklassen abhängt, nur zu Stilzwecken abgleichen möchten, verwenden Sie einfach eine CSS-Regel :

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

— A. Wolff
quelle

Ich könnte sagen (ohne dies zu testen), dass diese Methode besser ist. Elem.parents durchläuft die gesamte übergeordnete dom strucutre, wobei next () (wahrscheinlich) anhalten sollte, sobald es das nächstgelegene übergeordnete Element mit diesem Element gefunden hat und daher effizienter ist. Dies ist eine ungebildete Vermutung. Normalerweise benutze ich next (). Klingt so, als hätte ich ein neues Thema für meinen Blog gefunden! : P

— dudewad

@dudewad ja es ist aber es ist ziemlich neu. Ich meine, in der älteren JQ-Version AFAIK war dies nicht der Fall. Die Elternschleife wurde beim ersten übereinstimmenden Elternteil mit next () nicht unterbrochen, aber jetzt ist es so. (Ich weiß nicht seit welcher jq-Version, aber ich bin mir ziemlich sicher, dass ich in dieser Aussage richtig bin)

— A. Wolff

Gut zu wissen, danke für die Info. Seltsam, dass sie den Einbruch von der ersten Version nicht eingebaut hätten.

— Dudewad

Wenn keine Eltern zu finden sind, ist parent

— Alex

@ Alex Ziemlich interessant, danke für die Eingabe! BTW, Re-Lektüre die Frage, Is there any way in jQuery to check if any parent,..., closest()Check für Element selbst so dass diese nicht wirklich Frage zu beantworten, könnte OP wollen explecitely das Element ausschließen selbst, so ya, Antwort war zu verwenden.parents()

— A. Wolff

Sie können die parentsMethode mit dem angegebenen .classSelektor verwenden und prüfen, ob eine davon mit dieser übereinstimmt:

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

— Igor Dymov
quelle