jQuery.find() : trouver des éléments dans l’arborescence DOM

Avec la méthode jQuery.find() effectuez des recherches ciblées pour des balises HTML, des classes ou des ID spécifiques, et ce, sans aucune itération manuelle complexe.

Méthode jQuery.find() : de quoi s’agit-il ?

En appliquant la méthode jQuery.find() à un objet jQuery en particulier, vous pouvez localiser des éléments au sein de cet objet. Il s’agit d’une méthode de recherche récursive : les « enfants » directs de la méthode jQuery.find(parent) sont alors recherchés, au même titre que l’ensemble des éléments imbriqués dans l’arborescence DOM. Vous obtenez alors un nouvel objet jQuery renfermant tous les éléments trouvés. Vous pouvez ensuite choisir de le manipuler ou de vous en servir comme d’une base pour d’autres opérations. Il est par exemple possible d’ajouter une classe à cet objet en utilisant la méthode jQuery.addClass(), ou d’y associer d’autres éléments avec la méthode jQuery.append(). En outre, la bibliothèque jQuery pour WordPress vous permet de trouver facilement des objets dans votre système de gestion de contenu (ou CMS, pour Content Management System).

À quoi ressemble la syntaxe de la méthode jQuery.find() ?

La méthode jQuery.find() possède la structure suivante :

$(selector).find(filter)

Le terme filter est facultatif ; il permet de filtrer encore davantage les éléments trouvés en fonction de sélecteurs intégrés à jQuery, par exemple jQuery.find(class) ou encore jQuery.find(id).

Pour en savoir plus sur les sélecteurs, leur orthographe et leurs fonctions, consultez notre tutoriel jQuery.

Exemples d’application de la méthode jQuery.find()

Nous allons vous donner un aperçu du nombre de sélecteurs que vous pouvez utiliser comme filtre pour la méthode jQuery.find() grâce aux exemples suivants :

// Recherche de tous les éléments <a> à l'intérieur d'un élément <div> avec la classe "container"
$(’.container’).find(’a’);
// Recherche des éléments <li> à l'intérieur d'un élément <ul> avec l'ID "myList"
$(’#myList’).find(’li’);
// Recherche de tous les éléments <input> à l'intérieur d'un élément <form> et filtrage par le type "text"
$(’form’).find(’input[type="text"]’);

Vous pouvez aussi associer facilement d’autres fonctions à la méthode jQuery.find() :

$("div#container").find("button").addClass("selected");

Dans cet exemple, la méthode jQuery.find(element) nous permet de localiser tous les boutons de l’élément <div> avec l’ID container, et de leur attribuer la classe selected.