jQuery.find() : trouver des éléments dans l’ar­bo­res­cence DOM

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

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

En ap­pli­quant la méthode jQuery.find() à un objet jQuery en par­ti­cu­lier, 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 re­cher­chés, au même titre que l’ensemble des éléments imbriqués dans l’ar­bo­res­cence DOM. Vous obtenez alors un nouvel objet jQuery ren­fer­mant 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é­ra­tions. 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 bi­blio­thèque jQuery pour WordPress vous permet de trouver fa­ci­le­ment des objets dans votre système de gestion de contenu (ou CMS, pour Content Ma­na­ge­ment 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 fa­cul­ta­tif ; il permet de filtrer encore davantage les éléments trouvés en fonction de sé­lec­teurs intégrés à jQuery, par exemple jQuery.find(class) ou encore jQuery.find(id).

Pour en savoir plus sur les sé­lec­teurs, leur or­tho­graphe et leurs fonctions, consultez notre tutoriel jQuery.

Exemples d’ap­pli­ca­tion de la méthode jQuery.find()

Nous allons vous donner un aperçu du nombre de sé­lec­teurs 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 fa­ci­le­ment 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.