Jak iterować elementy potomne elementu div za pomocą jQuery?


257

Mam div i ma kilka elementów wejściowych ... Chciałbym iterować przez każdy z tych elementów. Pomysły?

Odpowiedzi:


476

Użyj children()i each(), możesz opcjonalnie przekazać selektor dochildren

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

Możesz także użyć bezpośredniego selektora podrzędnego:

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

68
następnie użyj $ (this) w zamknięciu, aby uzyskać dostęp do „bieżącego” elementu w pętli.
amarsuperstar

1
@amarsuperstar: właśnie dodawałem te informacje :-)
Andy E

Czy istnieje sposób poznania wartości „n”, zakładając, że $ (this) jest „n” dzieckiem dziecka?
Souvik Ghosh,

1
@SouvikGhosh: indeks jest przekazywany jako pierwszy argument funkcji zwrotnej dla each(). Sprawdź dokumenty, do których link znajduje się w powyższej odpowiedzi.
Andy E

55

Możliwe jest także iterowanie wszystkich elementów w określonym kontekście, bez względu na to, jak głęboko są zagnieżdżone:

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

Drugim parametrem $ („# mydiv”) przekazywanym do selektora „wejściowego” jQuery jest kontekst. W takim przypadku klauzula each () będzie iterować przez wszystkie elementy wejściowe w kontenerze #mydiv, nawet jeśli nie są one bezpośrednimi potomkami #mydiv.


1
Prawdopodobnie z powodu zagnieżdżenia to rozwiązanie działało dla mnie, podczas gdy drugie nie. Z tego powodu uważam, że jest to zwykle lepsze rozwiązanie.
arame3333

Właśnie tego szukałem. Jakiś sposób, aby zrobić Json z ich wartości? Muszę opublikować cały motyw jako json.
Muhammad Saqib,

8

Jeśli chcesz rekurencyjnie zapętlać elementy potomne :

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

UWAGA: W tym przykładzie pokazuję procedury obsługi zdarzeń zarejestrowane dla obiektu.


5

Można to również zrobić w ten sposób:

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

Powoduje to iterację wszystkich elementów podrzędnych, a ich element z wartością indeksu można uzyskać osobno, używając odpowiednio elementu i indeksu .


1

children () jest pętlą samą w sobie.

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

1

Nie sądzę, że musisz użyć each(), możesz użyć standardowej pętli

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

w ten sposób możesz mieć standardowe funkcje pętli, takie jak breaki continuedziała domyślnie

również debugging will be easier


Moje doświadczenie jest takie, że $.each()zawsze jest wolniejsze niż forpętla i jest to jedyna odpowiedź, która go używa. Kluczem tutaj jest użycie .eq()do uzyskania dostępu do rzeczywistego elementu w childrentablicy, a nie []notacji nawiasu ( ).
elPastor
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.