English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Parcours jQuery - Ancêtres

Avec jQuery, nous pouvons facilement parcourir l'arbre DOM pour trouver les ancêtres des éléments.

Les ancêtres sont les parents, les grands-parents, les arrière-grands-parents, etc.

Dans ce chapitre, nous expliquerons comment parcourir l'arbre DOM.

Parcourir l'arbre DOM

Nous avons les méthodes jQuery suivantes pour parcourir l'arbre DOM :

Dans ce chapitre, nous vous montrerons comment utiliser chaque méthode.

Méthode jQuery parent()

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

Cette méthode ne se déplace qu'un niveau vers le haut dans l'arbre DOM.

L'exemple suivant retourne le parent direct de l'élément SPAN:

div (arrière-grand-parent)
div (grand-parent)

p (parent direct)                  span

Exécuter le code

Vous pouvez également utiliser des paramètres optionnels pour filtrer la recherche des éléments parents.

L'exemple suivant retourne l'élément parent direct d'un paragraphe ayant la classe "selected":

$ (document).ready(function() {
  $("p").parent(".selected").css("background", "coral");
});
Vérifiez et voyez‹/›

Méthode parents() de jQuery

jQuery parents()La méthode renvoie tous les éléments ancêtres de l'élément sélectionné.

Cette méthode parcourt l'élément DOM à partir de l'élément parent jusqu'à l'élément racine du document (html>),

L'exemple suivant renvoie tous les ancêtres de l'élément SPAN :

body (arrière-arrière-grand-parent)
div (arrière-grand-parent)
div (grand-parent)

p (parent direct)                  span

Exécuter le code

Méthode ParentUntil() de jQuery

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

L'exemple suivant renvoie tous les éléments ancêtres entre SPAN et BODY :

body (arrière-arrière-grand-parent)
div (arrière-grand-parent)
div (grand-parent)

p (parent direct)                  span

Exécuter le code

Référence de parcours jQuery

Pour consulter les méthodes de parcours complètes, veuillez visiter notreRéférence de parcours jQuery.