web-dev-qa-db-fra.com

jQuery: Comment arriver à un enfant en particulier d'un parent?

Pour donner un exemple simplifié, le bloc suivant a été répété plusieurs fois sur la page (il est généré dynamiquement):

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

Lorsque je clique dessus, je peux accéder au parent du lien avec:

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

Cependant ... je dois aller au <div class="something1"> de ce parent particulier.

Fondamentalement, quelqu'un peut-il me dire comment se référer à un frère de niveau supérieur sans pouvoir le consulter directement? Appelons ça grand frère. Une référence directe au nom de classe du grand frère ferait disparaître toutes les occurrences de cet élément de la page - ce qui n'est pas l'effet recherché.

J'ai essayé:

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

N'importe qui? Merci.

jqueryjquery-selectorsparentsiblings
90
Tom

L'appel de .parents(".box .something1") renverra tous les éléments parents qui correspondent au sélecteur .box .something. En d'autres termes, il retournera les éléments parents qui sont .something1 et sont à l'intérieur de .box.

Vous devez obtenir les enfants du parent le plus proche, comme ceci:

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

Ce code appelle .closest pour que le parent le plus proche corresponde à un sélecteur, appelle ensuite .children sur cet élément parent pour trouver l'oncle que vous recherchez.

135
SLaks
$(this).parent()

Traverser des arbres est amusant

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

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

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

Et bien d’autres façons, vous pourriez trouver ces docs utiles.

17
Anurag

Ceci trouvera le premier parent avec la classe box, puis la première classe enfant avec une expression rationnelle correspondante something et obtiendra l'identifiant.

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

Si j'ai bien compris votre problème, $(this).parents('.box').children('.something1') Est-ce ce que vous cherchez?

6
Teja Kantamneni

Vous pouvez utiliser .each() avec .children() et un sélecteur entre parenthèses:

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

    //For Each Instance, grab a child called .something1. Fade It Out.
    $(this).children(".something1").fadeOut();
});
4
Olly