Wie iteriere ich mit jQuery durch untergeordnete Elemente eines Div?

Ich habe ein div und es enthält mehrere Eingabeelemente ... Ich möchte jedes dieser Elemente durchlaufen. Ideen?

Verwenden Sie children()und each(), Sie können optional einen Selektor an übergebenchildren

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

Sie können auch einfach die unmittelbare untergeordnete Auswahl verwenden:

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

Es ist auch möglich, alle Elemente in einem bestimmten Kontext zu durchlaufen, unabhängig davon, wie tief sie verschachtelt sind:

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

Der zweite Parameter $ ('# mydiv'), der an den jQuery 'input' Selector übergeben wird, ist der Kontext. In diesem Fall durchläuft die each () -Klausel alle Eingabeelemente im # mydiv-Container, auch wenn sie keine direkten untergeordneten Elemente von #mydiv sind.

Wenn Sie untergeordnete Elemente rekursiv durchlaufen müssen :

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"));   

HINWEIS: In diesem Beispiel zeige ich die mit einem Objekt registrierten Ereignishandler.

Dies kann auch folgendermaßen geschehen:

$('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
 });

Dadurch werden alle untergeordneten Elemente durchlaufen, und auf ihr Element mit Indexwert kann separat über Element und Index zugegriffen werden .

children () ist eine Schleife für sich.

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

Ich denke nicht, dass Sie verwenden müssen each(), können Sie Standard für Schleife verwenden

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");
}

Auf diese Weise können Sie den Standard für Schleifenfunktionen wie breakund continuestandardmäßig verwenden

auch der debugging will be easier