jQuery: Comment accéder à un enfant particulier d'un parent?

92

Pour donner un exemple simplifié, j'ai répété le bloc suivant sur la page plusieurs fois (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 me rendre au <div class="something1"> de ce parent en particulier.

En gros, quelqu'un peut-il me dire comment faire référence à un frère ou une sœur de niveau supérieur sans pouvoir s'y référer directement? Appelons ça grand frère. Une référence directe au nom de classe du grand frère ferait disparaître chaque instance de cet élément sur la page - ce qui n'est pas l'effet souhaité.

J'ai essayé:

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

N'importe qui? Merci.

— À M
source

La réponse d'Anurag peut ne pas sembler la bonne - cela m'a certainement fait m'arrêter et réfléchir - mais elle indique une faute de frappe flagrante dans votre code qui provoque l'échec de votre sélecteur. Le sélecteur, dans jQuery, n'est .parent() pas .parents()

— David dit de réintégrer Monica

@ricebowl: Faux. api.jquery.com/parents

— SLaks

@ricebowl ... parent () me donnerait quelque chose de div2, donc j'ai besoin de parents () pour accéder à la boîte de div.

— Tom

Ah; mes excuses. Euh ... Je ne sais pas s'il vaut mieux laisser mon ignorance en évidence ou supprimer l'erreur pour éviter de déranger quelqu'un d'autre ... = | Pourtant, au moins, j'ai appris quelque chose d'utile aujourd'hui; c'est le point, non ..? =)

— David dit de réintégrer Monica

1

@ricebowl, pas de soucis, merci pour votre contribution.

— Tom

144

L'appel .parents(".box .something1")renverra tous les éléments parents qui correspondent au sélecteur .box .something. En d'autres termes, il renverra les éléments parents qui sont .something1et 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 .closestpour obtenir le parent le plus interne correspondant à un sélecteur, puis appelle .childrencet élément parent pour trouver l'oncle que vous recherchez.

— SLaks
source

Je sais que c'est un peu vieux mais n'est-il pas préférable dans ce cas d'utiliser parent () plutôt que plus proche () car j'imagine qu'il y a plus de traversée d'arbre avec plus proche () ?

— rmorse

1

@acSlater: Il a besoin d'une traversée d'arbre. parent()est le mauvais élément.

— SLaks

Ah oui c'est parent (). Parent () dont Tom a besoin désolé! :)

— rmorse

1

@acSlater: Oui; Ça marcherait. Cependant, cela rend le Javascript beaucoup plus couplé à la structure HTML. .closest(...)est plus résilient et plus lisible.

— SLaks le

8

Au cas où quelqu'un se demanderait: après avoir trouvé le bon parent en utilisant .closest (), si vous recherchez un élément enfant qui n'est PAS un enfant direct (mais un enfant d'un enfant, par exemple), utilisez simplement. find () à la place de .children.

— Fabien Snauwaert le

17

$(this).parent()

La traversée des arbres est amusante

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

— Anurag
source

Merci mais je ne cherchais pas le parent, mais plutôt un autre enfant du parent (ou grand-parent en fait).

— Tom

Hehe ... c'est une affaire de famille en effet.

— Tom

13

Cela trouvera le premier parent avec la classe boxpuis trouvera la première classe enfant avec la correspondance regex somethinget obtiendra l'id.

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

— user2601995
source

6

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

— Teja Kantamneni
source

5

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

— Olly
source