Come trovare il figlio di un elemento HTML in jQuery

Gli elementi HTML includono qualsiasi parte di una pagina Web, come intestazioni, tabelle, immagini e paragrafi. Quando si intrecciano le variabili HTML l'una dentro l'altra, si creano elementi genitore e figlio. L'elemento superiore è il padre, mentre tutti gli elementi interfogliati diventano figli. In jQuery, puoi ottenere il figlio di un elemento usando la funzione "children ()" (figlio, in inglese), ma devi passare attraverso l'array di valori che la funzione crea.

Verifica che il tuo codice includa un riferimento alla libreria jQuery prima di provare a eseguire lo script in jQuery. Aggiungi questo codice all'interno delle variabili "" (intestazione) della tua pagina web, se non vedi il riferimento:

Aggiungi un paio di variabili di script sotto il riferimento alla libreria jQuery e scrivi una funzione per verificare che la pagina abbia completato il caricamento. Tutto il tuo script dovrebbe essere tra i tasti di questa funzione:

$ (function () {});

Seleziona l'elemento HTML necessario per ottenere un elenco di elementi figlio da esso. Ad esempio, se si desidera ottenere i bambini da un elenco non ordinato, selezionare l'elemento "ul". Aggiungi il selettore con la funzione "children ()" per ottenere il bambino:

$ ('ul.level-2'). children ();

L'esempio precedente selezionerà qualsiasi elenco non ordinato che abbia un nome di classe di "livello-2". Tuttavia, quando "children ()" trova più elementi figlio, creerà una matrice di valori. Avrai bisogno di codici speciali per elaborare una matrice.

Aggiungi "children ()" con "each ()" (each) per attraversare la matrice di elementi figlio. Essendo una struttura ad anello, hai bisogno di una variabile contatore, ma non dovresti crearla in anticipo in jQuery. Passa "i" come argomento in ogni "each ()" per ottenere il tuo contatore:

$ ('ul.level-2'). children (). each (function (i) {});

Dichiarare una variabile che manterrà il valore del testo di ogni elemento figlio. È possibile ottenere altri valori di elementi, ma il testo restituirà qualsiasi testo trovato all'interno del bambino ed è utile per ottenere dati. Imposta la variabile su "$ (this)" (this) per ottenere l'elemento corrente su cui sta lavorando la funzione "each ()". Aggiungi "$ (this)" con "text ()" (text) per ottenere il testo:

var childEl = $ (this) .text ();

Emetti i valori sulla tua pagina selezionando un elemento e aggiungi "append ()" (allegato) in modo che la funzione "each ()" possa continuare ad aggiungere i valori che trova:

$ ('div'). append (i + ":" + childEl + "");

In questo esempio, "childEl" viene emesso per una serie di variabili "". Ogni volta che jQuery ripete i codici all'interno di "each ()", emette il numero da "i", aggiunge una coppia di punti e virgola, emette il valore di "childEl" e termina la linea con una variabile di script.

Il tuo script finale dovrebbe assomigliare a questo:

$ (function () {$ ('ul.level-2'). children (). each (function (i) {var childEl = $ (this) .html (); $ ('div'). append (i + ":" + childEl + "");});});

consiglio

Aggiungi "console.log (childEl);" all'interno di ogni funzione "each ()" nell'ultima riga. Utilizza Firebug in Firefox o la Console JavaScript in Google Chrome per verificare i valori in una console durante il debug.

Sostituisci "text ()" con "html ()" per ottenere il codice HTML degli elementi figli.