web-dev-qa-db-ja.com

jQueryを使ってdivの子要素を反復処理する方法を教えてください。

私はdivを持っていて、それにはいくつかのinput要素があります...私はそれらの要素のそれぞれを通して繰り返したいのですが。アイデア？

jqueryiteration
234
Shamoon

children() および each() を使用すると、オプションでchildrenにセレクタを渡すことができます。

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

直接の子セレクタを使用することもできます。

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

特定のコンテキスト内のすべての要素を反復処理することもできます。要素がどれほど深くネストされているかは問題ありません。

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

JQueryの 'input'セレクタに渡される2番目のパラメータ$（ '＃mydiv'）はコンテキストです。この場合、each（）句は、＃mydivの直接の子ではない場合でも、＃mydivコンテナ内のすべての入力要素を反復処理します。

50
Liquinaut

子要素を再帰的にループ処理する必要がある場合：

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

注：この例では、イベントハンドラがオブジェクトに登録されていることを示しています。

4
tomloprod

そうすることもできます。
$('input', '#div').each(function () { console.log($(this)); //log every element found to console output });

3
Umar Asghar

私はあなたが 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

1
Basheer AL-MOMANI

children（）はそれ自体がループです。

$('.element').children().animate({
'opacity':'0'
});
1
Dan185
$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

これはすべての子を繰り返し処理し、index値を持つ要素はそれぞれelementおよびindexを使用して別々にアクセスできます。

0
Surya Swanoff