jQuery Traversant

❮ Précédent Suivant Chapitre ❯

Un descendant est un enfant, petit-enfant, petit-enfant, et ainsi de suite.

Avec jQuery, vous pouvez traverser vers le bas l'arbre DOM pour trouver les descendants d'un élément.

Traversant vers le bas de l'arbre DOM

Deux méthodes jQuery utiles pour traverser vers le bas l'arbre DOM sont:

children()
find()

jQuery children() Méthode

Les children() méthode renvoie tous les enfants directs de l'élément sélectionné.

Cette méthode ne traverse qu'un seul niveau bas de l'arbre DOM.

L'exemple suivant renvoie tous les éléments qui sont les enfants directs de chaque <div> éléments:

Exemple

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

Essayez - le vous - même »

Vous pouvez également utiliser un paramètre optionnel pour filtrer la recherche pour les enfants.

L'exemple suivant renvoie tous les <p> éléments avec le nom de classe "first" , qui sont des enfants directs de <div> :

Exemple

$(document).ready(function(){
$("div").children("p.first");
});

Essayez - le vous - même »

jQuery find() Méthode

Les find() méthode retourne éléments descendants de l'élément sélectionné, tout le chemin vers le bas pour le dernier descendant.

L'exemple suivant renvoie tous les <span> éléments qui sont les descendants de <div> :

Exemple

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

Essayez - le vous - même »

L'exemple suivant renvoie tous les descendants de <div> :

Exemple

$(document).ready(function(){
$("div").find("*");
});

Essayez - le vous - même »

Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 » Exercice 4»