Méthode de parcourir jQuery - parents()

Manuel de parcour jQuery

Exemple

Recherche de tous les éléments parent de chaque élément b :

$("b").parents()

Essayez-le vous-même

Définition et utilisation

La méthode parents() obtient les éléments ancestor de chaque élément de la collection d'éléments correspondants, le filtrage par sélecteur est optionnel.

.parents()selector)
Paramètre Description
selector Valeur de chaîne, contenant l'expression sélecteur utilisée pour correspondre aux éléments.

Explication détaillée

Si un objet jQuery représentant un ensemble d'éléments DOM est donné, la méthode .parents() nous permet de chercher les ancêtres de ces éléments dans l'arbre DOM, et de construire un nouvel objet jQuery à partir des éléments correspondants alignés de la plus proche à la plus éloignée de l'élément parent. Les éléments sont retournés dans l'ordre de la plus proche à la plus éloignée de l'élément parent. .parents() et .parent() La méthode est similaire, mais la deuxième parcourt un seul niveau de l'arbre DOM.

Cette méthode accepte une expression sélecteur optionnelle, du même type que les paramètres passés à la fonction $(). Si ce sélecteur est appliqué, les éléments sont filtrés en vérifiant s'ils correspondent à ce sélecteur.

Pensez à cette page avec une liste imbriquée de base :

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Si nous commençons par l'élément A, nous pouvons trouver ses ancêtres :

$('li.item-a').parents().css('background-color', 'red');

Essayez-le vous-même

Le résultat de cette appel est que les éléments tels que la liste de niveau 2, l'élément II et la liste de niveau 1 (jusqu'à <html> dans l'arbre DOM) ont un fond rouge. Comme nous n'avons pas appliqué l'expression sélecteur, l'élément parent est naturellement devenu une partie de l'objet. Si un sélecteur est appliqué, il vérifie si l'élément correspond avant de l'inclure. Comme nous n'avons pas appliqué l'expression sélecteur, tous les ancêtres sont des composants de l'objet jQuery retourné. Si un sélecteur est appliqué, seules les éléments correspondants seront inclus.

Manuel de parcour jQuery