Bagaimana cara saya mengulangi elemen anak-anak dari div menggunakan jQuery?

257

Saya memiliki sebuah div dan memiliki beberapa elemen input di dalamnya ... Saya ingin mengulangi setiap elemen tersebut. Ide ide?

Shamoon
sumber

Jawaban:

476

Gunakan children()dan each(), Anda dapat meneruskan pemilih secara opsionalchildren

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

Anda juga bisa menggunakan pemilih anak langsung:

$('#mydiv > input').each(function () { /* ... */ });
Andy E
sumber
68
kemudian gunakan $ (ini) dalam penutupan untuk mengakses item "saat ini" dalam loop.
amarsuperstar
1
@amarsuperstar: baru saja dalam proses menambahkan informasi itu :-)
Andy E
Apakah ada cara untuk mengetahui nilai "n", dengan asumsi $ (ini) adalah anak "n" dari orang tua?
Souvik Ghosh
1
@SouvikGhosh: indeks dilewatkan sebagai argumen pertama ke fungsi panggilan balik untuk each(). Periksa dokumen, ditautkan dalam jawaban di atas.
Andy E
55

Dimungkinkan juga untuk beralih melalui semua elemen dalam konteks tertentu, tidak peduli seberapa dalam mereka:

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

Parameter kedua $ ('# mydiv') yang dilewatkan ke pemilih 'input' jQuery adalah konteksnya. Dalam hal ini setiap klausa () akan beralih melalui semua elemen input dalam wadah #mydiv, bahkan jika mereka bukan anak-anak langsung dari #mydiv.

Liquinaut
sumber
1
Mungkin karena bersarang, solusi ini bekerja untuk saya sedangkan yang lain tidak. Untuk alasan itu saya akan berpikir bahwa ini biasanya solusi yang lebih baik.
arame3333
Ini yang saya cari. Adakah cara untuk membuat json dari nilai-nilai mereka? Saya perlu memposting semua tema sebagai json.
Muhammad Saqib
8

Jika Anda perlu mengulang elemen anak secara rekursif :

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

CATATAN: Dalam contoh ini saya menunjukkan penangan peristiwa yang terdaftar dengan suatu objek.

tomloprod
sumber
5

Ini dapat dilakukan dengan cara ini juga:

$('input', '#div').each(function () {
    console.log($(this)); //log every element found to console output
});
Umar Asghar
sumber
3
$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

Ini berulang melalui semua anak-anak dan elemen mereka dengan nilai indeks dapat diakses secara terpisah menggunakan elemen dan indeks masing-masing.

Surya Swanoff
sumber
1

children () adalah loop itu sendiri.

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

Saya tidak berpikir bahwa Anda perlu menggunakan each(), Anda dapat menggunakan standar untuk 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");
}

dengan cara ini Anda dapat memiliki standar untuk fitur loop seperti breakdan continueberfungsi secara default

juga debugging will be easier

Basheer AL-MOMANI
sumber
Pengalaman saya adalah bahwa $.each()selalu lebih lambat daripada satu forlingkaran, dan ini adalah satu-satunya jawaban yang menggunakannya. Kuncinya di sini adalah menggunakan .eq()untuk mengakses elemen aktual dalam childrenarray dan bukan []notasi braket ( ).
elPastor