ฉันจะวนซ้ำองค์ประกอบย่อยของ div โดยใช้ jQuery ได้อย่างไร

ฉันมี div แล้วและมันมีองค์ประกอบอินพุตหลายอย่างในนั้น ... ฉันต้องการวนซ้ำแต่ละองค์ประกอบเหล่านั้น ไอเดีย?

ใช้children()และeach()คุณสามารถเลือกที่จะส่งผ่านตัวเลือกไปที่children

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

คุณสามารถใช้ตัวเลือกลูก ๆ ได้ทันที:

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

นอกจากนี้ยังเป็นไปได้ที่จะวนซ้ำผ่านองค์ประกอบทั้งหมดภายในบริบทที่เฉพาะเจาะจงไม่มีความรู้สึกว่ามันซ้อนอยู่ลึกแค่ไหน:

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

พารามิเตอร์ตัวที่สอง $ ('# mydiv') ซึ่งผ่านไปยังตัวเลือก 'อินพุต' ของ jQuery คือบริบท ในกรณีนี้แต่ละประโยค () จะวนซ้ำผ่านองค์ประกอบอินพุตทั้งหมดภายใน #mydiv container แม้ว่าพวกเขาจะไม่ใช่ลูกโดยตรงของ #mydiv

หากคุณต้องการวนลูปผ่านอิลิเมนต์ลูกซ้ำ :

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

หมายเหตุ: ในตัวอย่างนี้ฉันแสดงตัวจัดการเหตุการณ์ที่ลงทะเบียนกับวัตถุ

มันสามารถทำได้ด้วยวิธีนี้เช่นกัน:

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

ซึ่งจะวนซ้ำผ่านส่วนย่อยทั้งหมดและองค์ประกอบที่มีค่าดัชนีสามารถเข้าถึงได้แยกต่างหากโดยใช้องค์ประกอบและดัชนีตามลำดับ

children () เป็นวงในตัวเอง

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

ฉันไม่คิดว่าคุณต้องใช้ each()คุณสามารถใช้มาตรฐานสำหรับการวนซ้ำ

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

วิธีนี้คุณสามารถมีมาตรฐานสำหรับคุณสมบัติวนรอบเช่นbreakและcontinueทำงานตามค่าเริ่มต้น

ยัง debugging will be easier