jQuery.find() per la ricerca di elementi nel DOM

Con jQuery.find() è possibile cercare de­ter­mi­na­ti tag HTML, classi o ID in modo mirato senza dover eseguire com­pli­ca­te ite­ra­zio­ni manuali.

Che cos’è il metodo jQuery.find()?

Ap­pli­can­do jQuery.find() su un dato oggetto jQuery puoi in­di­vi­dua­re gli elementi all’interno dell’oggetto stesso. La ricerca avviene in modo ricorsivo. In pratica la ricerca non riguarda solo i figli diretti di jQuery.find(parent), ma anche tutti gli elementi ni­di­fi­ca­ti nell’albero DOM. Il risultato è un nuovo oggetto jQuery che contiene tutti gli elementi trovati. Questo oggetto può essere quindi ma­ni­po­la­to o uti­liz­za­to come base per ulteriori ope­ra­zio­ni. Ad esempio, è possibile ag­giun­ge­re una classe all’oggetto con jQuery.addClass() oppure allegare altri elementi per mezzo di jQuery.append(). Inoltre jQuery su WordPress è uno strumento utile per trovare fa­cil­men­te gli oggetti nel tuo CMS.

Qual è la sintassi di jQuery.find()?

La struttura del metodo jQuery.find() è la seguente:

$(selector).find(filter)

• filter: è opzionale e serve per filtrare più a fondo gli elementi trovati sulla base di ulteriori selettori in jQuery, ad esempio jQuery.find(class) o jQuery.find(id).

Se vuoi saperne di più sui selettori, sulla loro scrittura e sulle loro funzioni, prova a dare un’occhiata al nostro tutorial su jQuery.

Esempi di ap­pli­ca­zio­ne per jQuery.find()

Gil esempi seguenti servono a mostrarti la gran varietà di selettori che puoi usare come filtro per il metodo jQuery.find():

// Cerca tutti gli elementi <a> all'interno di un elemento <div> con la classe "container"
$('.container').find('a');
// Cerca gli elementi <li> all'interno di un elemento <ul> con l'ID "myList"
$('#myList').find('li');
// Cerca tutti gli elementi <input> all'interno di un elemento <form> e filtra in base al tipo "text"
$('form').find('input[type="text"]');

Inoltre, puoi collegare co­mo­da­men­te ulteriori funzioni a jQuery.find():

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

In questo esempio, con jQuery.find(element) siamo in grado di in­di­vi­dua­re tutti i pulsanti nell’elemento <div> con l’ID “container” e assegnare loro la classe “selected”.