web-dev-qa-db-fra.com

Comment trouver un parent avec une classe connue dans jQuery?

J'ai un <div> qui contient de nombreux 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 d et que je souhaite trouver l'ID de son parent, classe a, comment procéderais-je?

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

javascriptjqueryhtmldomparent
209
John Smith

En supposant que this soit .d, vous pouvez écrire

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

La méthode closest renvoie le parent le plus profond de votre élément qui correspond au sélecteur.

422
SLaks

Passez un sélecteur à la fonction jQuery parents :

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

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

21
Drew Noakes

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

Description: Obtenez les ancêtres de chaque élément de l’ensemble actuel d’éléments correspondants, éventuellement filtrés par un sélecteur.

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

Description: Obtenez le parent de chaque élément de l’ensemble actuel d’éléments correspondants, éventuellement filtré par un sélecteur.

parent jQuery () vs parents ()

Et il y a . ParentsUntil () qui, à mon avis, sera le meilleur.

Description: Obtenez les ancêtres de chaque élément dans le jeu actuel d’éléments correspondants, jusqu’à ce qu’il n'inclue pas l'élément correspondant par le sélecteur.

6
Amr Elgarhy

Utilisez .parentsUntil ()

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