jQuery: Jak dotrzeć do konkretnego dziecka jednego z rodziców?

92

Aby podać uproszczony przykład, poniższy blok powtarzał się na stronie wiele razy (jest generowany dynamicznie):

<div class="box">
   <div class="something1"></div>
   <div class="something2">
      <a class="mylink">My link</a>
   </div>
</div>

Po kliknięciu mogę dostać się do rodzica linku za pomocą:

$(".mylink").click(function() {
   $(this).parents(".box").fadeOut("fast");
});

Jednak ... Muszę dostać się do <div class="something1">tego konkretnego rodzica.

Zasadniczo, czy ktoś może mi powiedzieć, jak odnosić się do rodzeństwa wyższego poziomu bez możliwości bezpośredniego odniesienia do niego? Nazwijmy to wielkim bratem. Bezpośrednie odniesienie do nazwy klasy starszego brata spowodowałoby zanikanie każdego wystąpienia tego elementu na stronie - co nie jest pożądanym efektem.

Próbowałem:

parents(".box .something1") ... no luck.
parents(".box > .something1") ... no luck.
siblings() ... no luck.

Ktoś? Dzięki.

Tomek
źródło
Odpowiedź Anuraga może nie wydawać się właściwa - z pewnością sprawiła, że ​​zatrzymałem się i pomyślałem - ale wskazuje rażącą literówkę w twoim kodzie, która powoduje, że twój selektor zawodzi. Selektor w jQuery .parent() nie jest.parents()
David mówi, że przywróć Monikę
@ricebowl: Źle. api.jquery.com/parents
SLaks
@ricebowl ... parent () dałoby mi div coś2, więc potrzebuję rodziców (), aby dostać się do div box.
Tom
Ach; przepraszam. Umm ... Nie wiem, czy najlepiej jest zostawić swoją ignorancję na widoku, czy usunąć błąd, aby nie denerwować nikogo innego ... = | Mimo to przynajmniej nauczyłem się dzisiaj czegoś pożytecznego; o to chodzi, prawda ..? =)
David mówi, że przywróć Monikę
1
@ricebowl, bez obaw, dzięki za wkład.
Tom

Odpowiedzi:

145

Wywołanie .parents(".box .something1")zwróci wszystkie elementy nadrzędne, które pasują do selektora .box .something. Innymi słowy, zwróci elementy nadrzędne, które są .something1i są wewnątrz .box.

Musisz zdobyć dzieci najbliższego rodzica, na przykład:

$(this).closest('.box').children('.something1')

Ten kod wywołuje .closestpobieranie najbardziej wewnętrznego rodzica pasującego do selektora, a następnie wywołuje .childrenten element nadrzędny, aby znaleźć wujka, którego szukasz.

SLaks
źródło
Wiem, że jest to trochę stare, ale czy w tym przypadku nie lepiej jest użyć parent () niż Najbliższy (), ponieważ wyobrażam sobie, że jest więcej przechodzenia przez drzewo z najbliższym () ?
rmorse
1
@acSlater: On potrzebuje przejścia przez drzewo. parent()jest złym elementem.
SLaks
Ach tak, to rodzic (). Rodzic (), którego Tom potrzebuje, przepraszam! :)
rmorse
1
@acSlater: Tak; to powinno działać. Jednak sprawia, że ​​JavaScript jest znacznie bardziej powiązany ze strukturą HTML. .closest(...)jest bardziej wytrzymały i bardziej czytelny.
SLaks
8
Na wypadek, gdyby ktoś się zastanawiał: po znalezieniu odpowiedniego rodzica za pomocą .closest (), jeśli szukasz elementu podrzędnego, który NIE jest bezpośrednim dzieckiem (ale na przykład dzieckiem dziecka), po prostu użyj. find () zamiast .children.
Fabien Snauwaert
17
$(this).parent()

Przemierzanie drzew jest fajne

$(this).parent().siblings(".something1");

$(this).parent().prev(); // if you always want the parent's previous sibling

$(this).parents(".box").children(".something1");

I wiele innych sposobów, te dokumenty mogą okazać się pomocne.

Anurag
źródło
Dziękuję, ale nie szukałem rodzica, tylko innego dziecka rodzica (a właściwie dziadka).
Tom
Hehe ... to rzeczywiście sprawa rodzinna.
Tom
13

Spowoduje to odnalezienie pierwszego rodzica z klasą, boxa następnie znalezienie pierwszej klasy potomnej z dopasowaniem wyrażeń regularnych somethingi uzyskanie identyfikatora.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")
user2601995
źródło
6

Jeśli dobrze zrozumiałem Twój problem, $(this).parents('.box').children('.something1')czy tego właśnie szukasz?

Teja Kantamneni
źródło
5

Możesz użyć .each()with .children()i selektora w nawiasach:

//Grab Each Instance of Box.
$(".box").each(function(i){

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});
Olly
źródło