jQuery Esplorazione - Discendenti

Con jQuery, possiamo esplorare facilmente l'albero DOM per trovare i discendenti degli elementi.

I discendenti sono figli, nipoti, pronipoti ecc.

In questa sezione, spiegheremo come esplorare l'albero DOM.

Esplorazione dell'albero DOM

Abbiamo i seguenti metodi jQuery per esplorare l'albero DOM:

• children()

• find()

Vi mostreremo come utilizzare ogni metodo.

Metodo jQuery children()

jQuery children()Il metodo restituisce tutti i figli diretti dell'elemento selezionato.

Questo metodo esplora solo un singolo livello dell'albero DOM.

Esempio di ritorno degli elementi diretti di DIV:

$("document").ready(function(){
　　$("div").children().css("background-color", "coral");
});

Puoi anche utilizzare parametri opzionali per filtrare le voci di ricerca.

Esempio di ritorno dei figli diretti di DIV di tutti gli elementi <p>:

$("document").ready(function(){
　　$("div").children("p").css("background-color",　"coral");
});

Metodo find() di jQuery

jQuery find()Il metodo restituisce tutti gli elementi discendenti che corrispondono ai parametri specificati.

Questo metodo esplora i discendenti degli elementi DOM fino all'ultimo discendente.

Partendo da tutti i paragrafi, e cercando l'elemento discendente span, rispetto a $("p span"):

$("document").ready(function(){
　　$("p").find("span").css("background",　"mediumpurple");
});

Per restituire più discendenti, separare i nomi dei selettori con virgola.

Esempio seguente restituisce tutti gli elementi <span> e <i> che sono discendenti dell'elemento <p>:

$("document").ready(function(){
　　$("p").find("span,　i").css("background",　"mediumpurple");
});

Riferimento alla esplorazione di jQuery

Per i metodi di esplorazione completa, visitare il nostroRiferimento alla esplorazione di jQuery.