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

Question 1

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.

Question 2

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.

Question 3

$(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.

Question 4

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")

Question 5

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

Question 6

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();
});

Answer 1

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.

jquery jquery-selectors parent siblings 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

Answer 2

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ę

Answer 3

@ricebowl: Źle. api.jquery.com/parents

SLaks

Answer 4

@ricebowl ... parent () dałoby mi div coś2, więc potrzebuję rodziców (), aby dostać się do div box.

Tom

Answer 5

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ę

Answer 6

1

@ricebowl, bez obaw, dzięki za wkład.

Tom

Answer 7

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

Answer 8

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

Answer 9

1

@acSlater: On potrzebuje przejścia przez drzewo. parent()jest złym elementem.

SLaks

Answer 10

Ach tak, to rodzic (). Rodzic (), którego Tom potrzebuje, przepraszam! :)

rmorse

Answer 11

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

Answer 12

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

Answer 13

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

Answer 14

Dziękuję, ale nie szukałem rodzica, tylko innego dziecka rodzica (a właściwie dziadka).

Tom

Answer 15

Hehe ... to rzeczywiście sprawa rodzinna.

Tom

Answer 16

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")

Answer 17

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

Answer 18

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();
});

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

Odpowiedzi: