Come posso scorrere gli elementi figlio di un div usando jQuery?


257

Ho un div e ha diversi elementi di input in esso ... Mi piacerebbe iterare attraverso ciascuno di quegli elementi. Idee?

Risposte:


476

Utilizzare children()e each(), facoltativamente, è possibile passare un selettore achildren

$('#mydiv').children('input').each(function () {
    alert(this.value); // "this" is the current element in the loop
});

Puoi anche usare il selettore figlio immediato:

$('#mydiv > input').each(function () { /* ... */ });

68
quindi usa $ (questo) all'interno della chiusura per accedere all'elemento "corrente" nel ciclo.
amarsuperstar,

1
@amarsuperstar: era in procinto di aggiungere quell'informazione :-)
Andy E

C'è un modo per conoscere il valore di "n", supponendo che $ (questo) sia il "n" th figlio del genitore?
Souvik Ghosh,

1
@SouvikGhosh: l'indice viene passato come primo argomento alla funzione di callback per each(). Controlla i documenti, collegati nella risposta sopra.
Andy E

55

È anche possibile iterare attraverso tutti gli elementi all'interno di un contesto specifico, non meno chiaro quanto siano profondamente nidificati:

$('input', $('#mydiv')).each(function () {
    console.log($(this)); //log every element found to console output
});

Il secondo parametro $ ('# mydiv') che viene passato al Selettore 'input' di jQuery è il contesto. In questo caso la clausola each () ripeterà tutti gli elementi di input all'interno del contenitore #mydiv, anche se non sono figli diretti di #mydiv.


1
Probabilmente a causa della nidificazione questa soluzione ha funzionato per me mentre l'altra no. Per questo motivo, penso che questa sia normalmente la soluzione migliore.
arame3333,

Questo è quello che stavo cercando. Qualche modo per fare json dai loro valori? Devo pubblicare tutti i temi come json.
Muhammad Saqib,

8

Se devi ricorrere in modo ricorsivo agli elementi figlio :

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // Show element
        console.info($currentElement);
        // Show events handlers of current element
        console.info($currentElement.data('events'));
        // Loop her children
        recursiveEach($currentElement);
    });
}

// Parent div
recursiveEach($("#div"));   

NOTA: in questo esempio mostro i gestori di eventi registrati con un oggetto.


5

Può essere fatto anche in questo modo:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});

3
$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

Questo scorre attraverso tutti i figli e il loro elemento con valore di indice è accessibile separatamente usando rispettivamente elemento e indice .


1

children () è un loop in sé.

$('.element').children().animate({
'opacity':'0'
});

1

Non penso che tu debba usare each(), puoi usare lo standard per il loop

var children = $element.children().not(".pb-sortable-placeholder");
for (var i = 0; i < children.length; i++) {
    var currentChild = children.eq(i);
    // whatever logic you want
    var oldPosition = currentChild.data("position");
}

in questo modo puoi avere lo standard per funzionalità di loop come breake continuefunziona di default

anche il debugging will be easier


La mia esperienza è che $.each()è sempre più lento di un forciclo, e questa è l'unica risposta che la usa. La chiave qui è usare il .eq()per accedere all'elemento reale all'interno childrendell'array e non dalla parentesi ( []) notazione.
elPastor,
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.