Jak znaleźć rodzica ze znaną klasą w jQuery?

244

Mam <div>wiele innych elementów <div>, każdy na innym poziomie zagnieżdżenia. Zamiast nadawać każdemu dziecku <div>identyfikator, raczej po prostu daję <div>identyfikator rootowi. Oto przykład:

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

Jeśli napiszę funkcję w jQuery, aby odpowiedzieć na klasę di chcę znaleźć identyfikator dla jej rodzica, klasy a, jak mam to zrobić?

Nie mogę tak po prostu zrobić $('.a').attr('id');, ponieważ istnieje wiele klas a. Mogłem znaleźć identyfikator rodzica rodzica, ale wydaje się, że jest to kiepski projekt, powolny i niezbyt polimorficzny (musiałbym napisać inny kod, aby znaleźć identyfikator klasy c).

javascript jquery html dom parent John Smith
źródło

Odpowiedzi:

490

Zakładając, że thisjest .d, można napisać

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

closestMetoda zwraca najgłębsze rodzica swojego elementu, który pasuje do selektora.

SLaks
źródło
47
Zauważ, że istnieje niewielki problem: jeśli element początkowy pasuje również do zapytania, nie otrzymujesz elementu nadrzędnego, ale ten sam element. To może być pożądane zachowanie. Jeśli nie, polecam to: $ (this) .parent (). Closest ('. A');
Risord
1
Bardzo pomocne. Zawsze używam $ (this) .parent (). Parent (). Parent () i wiedziałem, że jest lepsze rozwiązanie.
Wang'l Pakhrin
28

Przekaż selektor do funkcji rodziców jQuery :

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

EDYCJA Hmm, właściwie odpowiedź Slaksa jest lepsza, jeśli chcesz tylko najbliższego przodka, który pasuje do twojego selektora.

Drew Noakes
źródło
8

Możesz użyć rodziców (), aby uzyskać wszystkich rodziców z danym selektorem.

Opis: Pobierz przodków każdego elementu w bieżącym zestawie dopasowanych elementów, opcjonalnie filtrowanym przez selektor.

Ale Parent () otrzyma tylko pierwszego rodzica elementu.

Opis: Pobierz element nadrzędny każdego elementu z bieżącego zestawu dopasowanych elementów, opcjonalnie filtrowanego przez selektor.

jQuery Parent () vs. Parent ()

I jest .parentsUntil (), które moim zdaniem będą najlepsze.

Opis: Pobierz przodków każdego elementu w bieżącym zestawie dopasowanych elementów, aż do elementu dopasowanego przez selektor, ale bez niego.

Amr Elgarhy
źródło
Chce tylko samotnego rodzica, więc powinien zadzwonić closest.
SLaks,
2

Użyj .parentsUntil ()

$(".d").parentsUntil(".a");
jai3232
źródło
To kierowałoby każdy element nadrzędny aż do osiągnięcia dopasowanego elementu nadrzędnego.
Dustin Halstead,
0

Wyciąg z powyższych komentarzy @ Resord. Ten działał dla mnie i był bardziej skłonny do pytania.

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

Dzięki

Anjana Silva
źródło