JQuery kullanarak div öğelerinin alt öğeleri aracılığıyla nasıl yineleyebilirim?

Bir div var ve içinde birkaç girdi öğesi var ... Bu öğelerin her birini yinelemek istiyorum. Fikirler?

Kullanın children()ve each()isteğe bağlı olarak bir seçiciyichildren

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

Ayrıca, hemen çocuk seçiciyi de kullanabilirsiniz:

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

Ayrıca, ne kadar derin iç içe oldukları önemli değil, belirli bir bağlamdaki tüm öğeler arasında yineleme yapmak da mümkündür:

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

JQuery 'giriş' Seçicisine iletilen ikinci parametre $ ('# mydiv') bağlamdır. Bu durumda, her () deyimi, #mydiv öğesinin doğrudan alt öğeleri olmasa bile #mydiv kapsayıcısındaki tüm girdi öğeleri arasında yineleme yapar.

Alt öğeler arasında yinelemeli olarak döngü yapmanız gerekiyorsa :

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

NOT: Bu örnekte, bir nesneye kaydedilmiş olay işleyicilerini gösteririm.

Bu şekilde de yapılabilir:

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

Bu, tüm çocuklar aracılığıyla yinelenir ve dizin değeri olan öğelerine sırasıyla öğe ve dizin kullanılarak ayrı ayrı erişilebilir .

children () kendi içinde bir döngüdür.

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

Kullanmanız gerektiğini düşünmüyorum, each()döngü için standart kullanabilirsiniz

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

bu şekilde varsayılan olarak döngü özellikleri için standartlara sahip olabilir breakve continueçalışır

Ayrıca debugging will be easier