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

— John Smith
source

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
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
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
source

Il ne veut qu'un seul parent, il devrait donc appeler closest.

— SLaks

2

Utilisez .parentsUntil ()

$(".d").parentsUntil(".a");

— jai3232
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
source