Parcours jQuery - Descendants

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

Les descendants sont les enfants, les petits-enfants, les arrière-petits-enfants, 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 :

• children()

• find()

Nous allons vous montrer comment utiliser chaque méthode.

Méthode jQuery children()

jQuery children()La méthode renvoie tous les descendants directs de l'élément sélectionné.

Cette méthode ne parcourt que le premier niveau de l'arbre DOM.

Les exemples ci-dessous renvoient tous les éléments directs de DIV :

$("document").ready(function(){
　　$("div").children().css("background-color",　"coral");
});

Vous pouvez également utiliser des paramètres optionnels pour filtrer les éléments recherchés.

Les exemples suivants renvoient tous les éléments <p> descendants directs de DIV :

$("document").ready(function(){
　　$("div").children("p").css("background-color",　"coral");
});

Méthode find() jQuery

jQuery find()La méthode renvoie tous les éléments descendants qui correspondent aux paramètres spécifiés.

Cette méthode parcourt les descendants des éléments DOM en descendant jusqu'au dernier descendant.

Commencez par tous les paragraphes et recherchez les éléments descendants span, comme $("p span") :

$("document").ready(function(){
　　$("p").find("span").css("background",　"mediumpurple");
});

Pour renvoyer plusieurs descendants, séparez les noms des sélecteurs par des virgules.

Les exemples suivants renvoient à tous les éléments <span> et <i> descendants de l'élément <p> :

$("document").ready(function(){
　　$("p").find("span,　i").css("background",　"mediumpurple");
});

Référence de parcours jQuery

Pour une référence complète des méthodes de parcours, veuillez visiter notreRéférence de parcours jQuery.