Parcours jQuery - méthode find()
Exemple
Recherche de tous les éléments descendants span dans tous les paragraphes et ajuste leur couleur à rouge :
$("p").find("span").css('color','red');
Définition et utilisation
La méthode find() récupère les descendants de chaque élément de l'ensemble d'éléments actuels, en filtrant par sélecteur, objet jQuery ou élément.
Syntaxe
.find(selector)
| Paramètres | Description |
|---|---|
| selector | Valeur de chaîne, contenant l'expression sélecteur fournie pour la correspondance de l'ensemble d'éléments actuels. |
Explication détaillée
Si nous avons un objet jQuery représentant un ensemble d'éléments DOM, la méthode .find() nous permet de chercher ces éléments descendants dans l'arbre DOM et de construire un nouvel objet jQuery à partir des éléments correspondants. .find() est similaire à .children(), mais contrairement à cette dernière, .find() ne se limite pas à une seule couche de l'arbre DOM.
La première caractéristique visible de la méthode .find() est qu'elle accepte une expression sélecteur de type identique à celle que nous transmettons à la fonction $(). Elle filtre les éléments en testant s'ils correspondent à cette expression.
Veuillez réfléchir à cette liste imbriquée simple ci-dessous :
<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>
Nous allons commencer par la liste II pour trouver les éléments de liste :
$('li.item-ii').find('li').css('background-color', 'red');
Les résultats de cette enquête montrent que les projets A, B, 1, 2, 3 et C ont tous été mis en arrière-plan rouge. Même si le projet II correspond à l'expression du sélecteur, il ne sera pas inclus dans les résultats ; seuls les descendants seront matchés.
Différent des autres méthodes de parcour d'arbre, l'expression du sélecteur est un paramètre obligatoire pour .find(). Si nous avons besoin de récupérer tous les éléments descendants, nous pouvons transmettre le sélecteur générique '*'.
Le contexte du sélecteur est réalisé par la méthode .find() ; donc $('li.item-ii').find('li') est équivalent à $('li', 'li.item-ii').
Pour jQuery 1.6, nous pouvons également utiliser un ensemble jQuery ou un élément donné pour le filtrage. Toujours avec la liste imbriquée ci-dessus, nous écrivons d'abord ainsi :
var $allListElements = $('li');
Ensuite, passez cet objet jQuery à la méthode find :
$('li.item-ii').find( $allListElements );
Le code ci-dessus retourne un ensemble jQuery contenant les éléments de liste appartenant aux descendants de la liste II.
De même, vous pouvez également transmettre un élément :
var item1 = $('li.item-1')[0];
$('li.item-ii').find( item1 ).css('background-color', 'red');
Le résultat de cette appel est que le projet 1 a été mis en arrière-plan rouge.
