Comment trouver un parent avec une classe connue dans jQuery?

244

J'en ai un <div>qui en contient beaucoup d'autres <div>, chacun à un niveau d'imbrication différent. Plutôt que de donner à chaque enfant <div>un identifiant, je préfère simplement donner à la racine <div>l'identifiant. Voici un exemple:

<div class="a" id="a5">
  <div class="b">
    <div class="c">
      <a class="d">
      </a>
    </div>
  </div>
</div>

Si j'écris une fonction dans jQuery pour répondre à la classe det que je souhaite trouver l'ID de son parent, classe a, comment dois-je procéder?

Je ne peux pas simplement le faire $('.a').attr('id');, car il existe plusieurs classes a. Je pourrais trouver l'ID du parent du parent de son parent, mais cela semble de mauvaise conception, lent et peu polymorphe (je devrais écrire un code différent pour trouver l'ID de la classe c).

javascript jquery html dom parent John Smith
la source

Réponses:

490

En supposant que thisc'est .d, vous pouvez écrire

$(this).closest('.a');

La closestméthode renvoie le parent le plus interne de votre élément qui correspond au sélecteur.

SLaks
la source
47
Notez qu'il y a peu de problème: si votre élément de départ correspond également à la requête, vous n'obtenez pas l'élément parent mais le même élément à la place. Ce comportement peut être souhaité ou non. Sinon, je recommande ceci: $ (ce) .parent (). Le plus proche ('. A');
Risord
1
Très utile. J'utilise toujours pour faire $ (this) .parent (). Parent (). Parent () et je savais qu'il y avait une meilleure solution.
Wang'l Pakhrin
28

Passez un sélecteur à la fonction parents jQuery :

d.parents('.a').attr('id')

EDIT Hmm, la réponse de Slaks est en fait supérieure si vous ne voulez que l'ancêtre le plus proche qui correspond à votre sélecteur.

Drew Noakes
la source
8

Vous pouvez utiliser parents () pour obtenir tous les parents avec le sélecteur donné.

Description: récupère les ancêtres de chaque élément dans l'ensemble actuel d'éléments correspondants, éventuellement filtré par un sélecteur.

Mais parent () n'obtiendra que le premier parent de l'élément.

Description: récupère le parent de chaque élément dans l'ensemble actuel d'éléments correspondants, éventuellement filtré par un sélecteur.

Parent jQuery () vs parents ()

Et il y a .parentsUntil () qui je pense sera le meilleur.

Description: récupère les ancêtres de chaque élément dans l'ensemble actuel des éléments correspondants, jusqu'à mais sans inclure l'élément correspondant par le sélecteur.

Amr Elgarhy
la source
Il ne veut qu'un seul parent, il devrait donc appeler closest.
SLaks
2

Utilisez .parentsUntil ()

$(".d").parentsUntil(".a");
jai3232
la source
Cela ciblerait chaque élément parent jusqu'à atteindre l'élément parent correspondant.
Dustin Halstead
0

Extrait des commentaires de @ Resord ci-dessus. Celui-ci a fonctionné pour moi et plus étroitement incliné avec la question.

$(this).parent().closest('.a');

Merci

Anjana Silva
la source