Làm cách nào để lặp lại các phần tử con của div bằng jQuery?

Tôi có một div và nó có một số yếu tố đầu vào trong đó ... Tôi muốn lặp lại qua từng yếu tố đó. Ý tưởng?

Sử dụng children()và each(), bạn có thể tùy ý chuyển một bộ chọn đểchildren

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

Bạn cũng có thể chỉ cần sử dụng bộ chọn con ngay lập tức:

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

Cũng có thể lặp lại qua tất cả các yếu tố trong một bối cảnh cụ thể, không rõ ràng chúng được lồng sâu như thế nào:

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

Tham số thứ hai $ ('# mydiv') được truyền cho Bộ chọn 'đầu vào' của jQuery là bối cảnh. Trong trường hợp này, mệnh đề Each () sẽ lặp qua tất cả các phần tử đầu vào trong vùng chứa #mydiv, ngay cả khi chúng không phải là con trực tiếp của #mydiv.

Nếu bạn cần lặp qua các phần tử con một cách đệ quy :

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

LƯU Ý: Trong ví dụ này tôi hiển thị các trình xử lý sự kiện đã đăng ký với một đối tượng.

Nó cũng có thể được thực hiện theo cách này:

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

Điều này lặp lại thông qua tất cả các phần tử con và phần tử của chúng với giá trị chỉ mục có thể được truy cập riêng bằng cách sử dụng phần tử và chỉ mục tương ứng.

trẻ em () là một vòng lặp trong chính nó.

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

Tôi không nghĩ rằng bạn cần sử dụng each(), bạn có thể sử dụng tiêu chuẩn cho vòng lặp

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

bằng cách này, bạn có thể có tiêu chuẩn cho các tính năng vòng lặp như breakvà continuehoạt động theo mặc định

cũng vậy, debugging will be easier