Elementi HTML includono qualsiasi parte di una pagina Web, ad esempio intestazioni, tabelle, immagini e paragrafi. Quando si nidificano tag HTML all'interno della vicenda, si crea genitore e bambini elementi. L'elemento superiore è il padre, mentre tutti gli elementi nidificati diventano i bambini. In jQuery, è possibile ottenere i figli di un elemento utilizzando la funzione "children()", ma è necessario scorrere la matrice di valori che la funzione crea.

Istruzioni

1

Verifica che il codice include un riferimento alla libreria jQuery prima di tentare di script in jQuery. Aggiungere questo codice all'interno dei tag "< head >" della tua pagina Web se non vedete il riferimento:

< script elemento. Aggiungere il selettore con la funzione "children()" per ottenere i figli:

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

Nell'esempio di cui sopra selezionerà qualsiasi elenco non ordinato che viene assegnato un nome di classe di "livello 2". Tuttavia, quando "children()" trova più elementi figlio, creerà una matrice di valori. Avete bisogno di un codice speciale per elaborare una matrice.

4

Aggiungere "children()" con "Each ()" per scorrere la matrice di elementi figlio. Poiché si tratta di una struttura di ciclica, occorre una variabile contatore, ma non è necessario crearlo prima del tempo in jQuery. Passare a "i" come argomento in "Each ()" per ottenere il vostro contatore:

$('ul.level-2').children (). Each (function (i) {

});

5

Dichiarare una variabile che conterrà il valore di testo di ogni elemento figlio. È possibile ottenere altri valori dagli elementi, ma testo verrà restituito qualsiasi testo trovato all'interno i bambini ed è utile per la cattura dei dati. Impostare la variabile "$(this)" per ottenere l'elemento corrente che la funzione di "Each ()" sta lavorando su. Aggiungere "$(this)" con "Text ()" per ottenere il testo:

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

6

I valori alla tua pagina di output selezionando un elemento e aggiungendo "Append ()", quindi la funzione di "Each ()" può continuare ad aggiungere i valori come li trova:

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

In questo esempio, "childEl" è uscita a un insieme di tag "< div >". Ogni volta che jQuery ripete il codice all'interno di "Each ()" restituisce il numero di «io», aggiunge un paio di punti e virgola, viene restituito il valore di "childEl" e termina la linea con un tag di interruzione di riga.

7

Lo script finale sarà simile a questo:

$(function() () {

$('ul.level-2').children (). Each (function (i) {

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

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

});

});

Consigli & Avvertenze

• Aggiungi "console.log(childEl);" all'interno della funzione "Each ()" sull'ultima riga. Usare Firebug in Firefox o la JavaScript Console di Google Chrome per controllare i valori in una console durante il debug.
• Sostituire "Text ()" con "HTML ()" per ottenere il codice HTML per gli elementi figlio.