Comment trouver un parent avec une classe connue en jQuery ?

Question

J'ai un <div> qui a beaucoup d'autres <div> en son sein, 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 je veux trouver l'ID de son parent, la classe a comment dois-je faire ?

Je ne peux pas simplement faire $('.a').attr('id'); parce qu'il y a plusieurs classes a s. Je pourrais trouver l'ID de son parent, de son parent et de son parent, mais cela semble mal conçu, lent et pas très polymorphe (je devrais écrire un code différent pour trouver l'ID de la classe c ).

Answer 1

En supposant que this es .d vous pouvez écrire

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

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

Answer 2

Passez un sélecteur à l'outil jQuery parents fonction :

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

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

Answer 3

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

Description : Obtenir les ancêtres de chaque dans l'ensemble actuel d'éléments correspondantes, éventuellement filtrées par un sélecteur.

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

Description : Obtenir le parent de chaque dans l'ensemble actuel d'éléments correspondantes, éventuellement filtrées par un sélecteur.

jQuery parent() vs. parents()

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

Description : Obtenir les ancêtres de chaque dans l'ensemble actuel d'éléments correspondantes, jusqu'à mais sans inclure l'élément correspondant au sélecteur.

Answer 4

Extrait des commentaires de @Resord ci-dessus. Celui-ci a fonctionné pour moi et correspond mieux à la question.

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

Gracias

Answer 5

<div id="412412412" class="input-group date">
     <div class="input-group-prepend">
          <button class="btn btn-danger" type="button">Button Click</button>
          <input type="text" class="form-control" value="">
      </div>
</div>

Dans ma situation, j'utilise ce code :

$(this).parent().closest('.date').attr('id')

J'espère que cela aidera quelqu'un.