jQueryを使用してdivの子要素を反復するにはどうすればよいですか？

私には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
});

jQueryの「入力」セレクターに渡される2番目のパラメーター$（ '＃mydiv'）はコンテキストです。この場合、each（）句は、＃mydivの直接の子でなくても、＃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()あなたが使う必要があるとは思いません 、あなたは標準のforループを使うことができます

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

これにより、標準のforループ機能を使用でき、デフォルトbreakでcontinue機能します

また、 debugging will be easier