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

Con jQuery.find() è possibile cercare determinati tag HTML, classi o ID in modo mirato senza dover eseguire complicate iterazioni manuali.

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

Applicando jQuery.find() su un dato oggetto jQuery puoi individuare 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 nidificati nell’albero DOM. Il risultato è un nuovo oggetto jQuery che contiene tutti gli elementi trovati. Questo oggetto può essere quindi manipolato o utilizzato come base per ulteriori operazioni. Ad esempio, è possibile aggiungere 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 facilmente 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 applicazione 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 comodamente ulteriori funzioni a jQuery.find():

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

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