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

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