Como iterar os elementos filhos de uma div usando o jQuery?

Eu tenho uma div e ela possui vários elementos de entrada ... Eu gostaria de percorrer cada um desses elementos. Ideias?

Use children()e each(), opcionalmente, você pode passar um seletor parachildren

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

Você também pode usar o seletor filho imediato:

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

Também é possível iterar por todos os elementos em um contexto específico, não importando o quão profundamente aninhados eles estejam:

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

O segundo parâmetro $ ('# mydiv') que é passado para o seletor 'input' do jQuery é o contexto. Nesse caso, a cláusula each () irá percorrer todos os elementos de entrada no contêiner #mydiv, mesmo que não sejam filhos diretos de #mydiv.

Se você precisar percorrer elementos filho recursivamente :

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: Neste exemplo, mostro os manipuladores de eventos registrados com um objeto.

Também pode ser feito desta maneira:

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

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

Isso itera através de todos os filhos e seu elemento com valor de índice pode ser acessado separadamente usando elemento e índice, respectivamente.

children () é um loop em si.

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

Eu não acho que você precisa usar each(), você pode usar o padrão para 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");
}

Dessa forma, você pode ter o padrão para recursos de loop como breake continuefunciona por padrão

também o debugging will be easier