jQuery Traversing - Ancêtres


Avec jQuery, vous pouvez parcourir l'arborescence DOM pour trouver les ancêtres d'un élément.

Un ancêtre est un parent, un grand-parent, un arrière-grand-parent, etc.


Parcourir l'arborescence DOM

Trois méthodes jQuery utiles pour parcourir l'arborescence DOM sont :

  • parent()
  • parents()
  • parentsUntil()

Méthode jQuery parent()

La parent()méthode renvoie l'élément parent direct de l'élément sélectionné.

Cette méthode ne traverse qu'un seul niveau vers le haut de l'arborescence DOM.

L'exemple suivant renvoie l'élément parent direct de chaque <span> élément :

Exemple

$(document).ready(function(){
  $("span").parent();
});


Méthode jQuery parents()

La parents()méthode renvoie tous les éléments ancêtres de l'élément sélectionné, jusqu'à l'élément racine du document ( <html>).

L'exemple suivant renvoie tous les ancêtres de tous les <span>éléments :

Exemple

$(document).ready(function(){
  $("span").parents();
});

Vous pouvez également utiliser un paramètre facultatif pour filtrer la recherche d'ancêtres.

L'exemple suivant renvoie tous les ancêtres de tous les <span>éléments qui sont <ul> des éléments :

Exemple

$(document).ready(function(){
  $("span").parents("ul");
});

Méthode jQuery parentsUntil()

La parentsUntil()méthode renvoie tous les éléments ancêtres entre deux arguments donnés.

L'exemple suivant renvoie tous les éléments ancêtres entre a <span>et a <div>element :

Exemple

$(document).ready(function(){
  $("span").parentsUntil("div");
});

Exercices jQuery

Testez-vous avec des exercices

Exercer:

Utilisez une méthode jQuery pour obtenir le parent direct d'un élément <span>.

$("span").();


jQuery Traversing Reference

Pour un aperçu complet de toutes les méthodes jQuery Traversing, veuillez consulter notre jQuery Traversing Reference .