Wie iteriere ich mit jQuery durch untergeordnete Elemente eines Div?

257

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

Shamoon
quelle

Antworten:

476

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 () { /* ... */ });
Andy E.
quelle
68
Verwenden Sie dann $ (this) innerhalb des Abschlusses, um auf das "aktuelle" Element in der Schleife zuzugreifen.
Amarsuperstar
1
@amarsuperstar: war gerade dabei, diese Informationen hinzuzufügen :-)
Andy E
Gibt es eine Möglichkeit, den Wert von "n" zu ermitteln, vorausgesetzt, $ (this) ist das "n" -te Kind des Elternteils?
Souvik Ghosh
1
@ SouvikGhosh: Der Index wird als erstes Argument an die Rückruffunktion für übergeben each(). Überprüfen Sie die Dokumente, die in der obigen Antwort verlinkt sind.
Andy E
55

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.

Liquinaut
quelle
1
Wahrscheinlich hat diese Lösung aufgrund der Verschachtelung bei mir funktioniert, während die andere dies nicht tat. Aus diesem Grund würde ich denken, dass dies normalerweise die bessere Lösung ist.
Arame3333
Das habe ich gesucht. Gibt es eine Möglichkeit, json aus ihren Werten zu machen? Ich muss das ganze Thema als json posten.
Muhammad Saqib
8

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.

Tomloprod
quelle
5

Dies kann auch folgendermaßen geschehen:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});
Umar Asghar
quelle
3
$('#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 .

Surya Swanoff
quelle
1

children () ist eine Schleife für sich.

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

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

Basheer AL-MOMANI
quelle
Ich habe die Erfahrung gemacht, dass dies $.each()immer langsamer ist als eine forSchleife, und dies ist die einzige Antwort, die sie verwendet. Der Schlüssel hier ist, mit dem .eq()auf das eigentliche Element innerhalb des childrenArrays zuzugreifen und nicht mit der Klammer ( []).
elPastor