jQuery: Hoe kom ik bij een bepaald kind van een ouder?

Om een ​​vereenvoudigd voorbeeld te geven, ik heb het volgende blok vaak herhaald op de pagina (het wordt dynamisch gegenereerd):

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

Als erop wordt geklikt, kan ik naar de bovenliggende link van de link gaan met:

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

Echter… ik moet naar de <div class="something1">van die specifieke ouder.

Kan iemand me in het algemeen vertellen hoe ik naar een broer of zus op een hoger niveau moet verwijzen zonder er rechtstreeks naar te kunnen verwijzen? Laten we het grote broer noemen. Een directe verwijzing naar de klassenaam van de grote broer zou ervoor zorgen dat elk element van dat element op de pagina uitsterft – wat niet het gewenste effect is.

Ik heb het geprobeerd:

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

Iemand? Bedankt.


Antwoord 1, autoriteit 100%

Door .parents(".box .something1")aan te roepen, worden alle bovenliggende elementen geretourneerd die overeenkomen met de selector .box .something. Met andere woorden, het retourneert bovenliggende elementen die .something1zijn en binnen .boxvallen.

Je moet de kinderen van de naaste ouder als volgt ophalen:

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

Deze code roept .closestaan om de binnenste ouder te krijgen die overeenkomt met een selector en roept vervolgens .childrenop dat bovenliggende element aan om de oom te vinden die je zoekt.


Antwoord 2, autoriteit 13%

$(this).parent()

Door bomen schuiven is leuk

$(this).parent().siblings(".something1");
$(this).parent().prev(); // if you always want the parent's previous sibling
$(this).parents(".box").children(".something1");

En nog veel meer manieren waarop u deze docsnuttig kunt vinden.


Antwoord 3, autoriteit 10%

Hiermee wordt de eerste ouder gevonden met klasse boxen vervolgens de eerste onderliggende klasse gevonden met regex die overeenkomt met somethingen de id ophalen.

$(".mylink").closest(".box").find('[class*="something"]').first().attr("id")

Antwoord 4, autoriteit 5%

Als ik je probleem goed heb begrepen, $(this).parents('.box').children('.something1')Is dit wat je zoekt?


Antwoord 5, autoriteit 3%

Je zou .each()kunnen gebruiken met .children()en een selector tussen haakjes:

//Grab Each Instance of Box.
$(".box").each(function(i){
    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});

Other episodes