Wie finde ich ein Elternteil mit einer bekannten Klasse in jQuery?

242

Ich habe eine <div>, die viele andere <div>s enthält, jede auf einer anderen Verschachtelungsebene. Anstatt jedem Kind <div>eine Kennung zu geben, gebe ich der Wurzel nur <div>die Kennung. Hier ist ein Beispiel:

<div class="a" id="a5">
  <div class="b">
    <div class="c">
      <a class="d">
      </a>
    </div>
  </div>
</div>

Wie würde ich das tun, wenn ich in jQuery eine Funktion schreibe, um auf die Klasse zu antworten, dund die ID für die übergeordnete Klasse ermitteln amöchte?

Ich kann nicht einfach tun $('.a').attr('id');, weil es mehrere Klassen gibt a. Ich konnte die ID der Eltern der Eltern finden, aber das scheint von schlechtem Design, langsam und nicht sehr polymorph zu sein (ich müsste anderen Code schreiben, um die ID für die Klasse zu finden c).

javascript jquery html dom parent John Smith
quelle

Antworten:

488

Unter der Annahme , dass thisist .d, können Sie schreiben

$(this).closest('.a');

Die closestMethode gibt das innerste übergeordnete Element Ihres Elements zurück, das dem Selektor entspricht.

SLaks
quelle
47
Beachten Sie, dass es wenig Haken gibt: Wenn Ihr Startelement auch mit der Abfrage übereinstimmt, erhalten Sie nicht das übergeordnete Element, sondern dasselbe Element. Dies kann erwünschtes Verhalten sein oder auch nicht. Wenn nicht, empfehle ich Folgendes: $ (this) .parent (). Nearest ('. A');
Risord
1
Sehr hilfreich. Ich mache immer $ (this) .parent (). Parent (). Parent () und ich wusste, dass es eine bessere Lösung gibt.
Wang'l Pakhrin
28

Übergeben Sie einen Selektor an die jQuery Eltern Funktion:

d.parents('.a').attr('id')

EDIT Hmm, tatsächlich ist Slaks Antwort überlegen, wenn Sie nur den nächsten Vorfahren suchen, der zu Ihrem Selektor passt.

Drew Noakes
quelle
8

Sie können parent () verwenden , um alle Eltern mit dem angegebenen Selektor abzurufen.

Beschreibung: Ruft die Vorfahren jedes Elements in der aktuellen Gruppe übereinstimmender Elemente ab, die optional durch einen Selektor gefiltert werden.

Aber parent () erhält nur den ersten Elternteil des Elements.

Beschreibung: Ruft das übergeordnete Element jedes Elements in der aktuellen Gruppe übereinstimmender Elemente ab, optional gefiltert durch einen Selektor.

jQuery parent () vs. parent ()

Und es gibt .parentsUntil (), von dem ich denke, dass es das Beste ist.

Beschreibung: Ermittelt die Vorfahren jedes Elements in der aktuellen Gruppe übereinstimmender Elemente, bis auf das vom Selektor übereinstimmende Element, jedoch nicht.

Amr Elgarhy
quelle
Er will nur einen einzigen Elternteil, so dass er anrufen sollte closest.
SLaks
2

Verwenden Sie .parentsUntil ()

$(".d").parentsUntil(".a");
jai3232
quelle
Das würde auf jedes übergeordnete Element abzielen, bis das übereinstimmende übergeordnete Element erreicht ist.
Dustin Halstead
0

Auszug aus den obigen Kommentaren von @ Resord. Dieser arbeitete für mich und neigte eher zur Frage.

$(this).parent().closest('.a');

Vielen Dank

Anjana Silva
quelle