如何使用jQuery迭代div的子元素？

Question

我有一個div，它有幾個輸入元素...我想遍歷每個元素。想法？

Answer 1

使用children()和each()，您可以選擇選擇傳遞給children

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

你也可以只使用直接子選擇器：

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

Answer 2

也可以通過所有元素進行迭代在特定的情況下，沒有任何mattter嵌套得如此之深：

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

傳遞給jQuery'input'Selector的第二個參數$（'＃mydiv'）是上下文。在這種情況下，each（）子句將遍歷#mydiv容器中的所有輸入元素，即使它們不是#mydiv的直接子元素。

Answer 3

如果您需要遍歷子元素遞歸：

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

---

注： 在這個例子中，我表現出與對象註冊的事件處理程序。

Answer 4

它也可以這樣做。
$('input', '#div').each(function() { console.log($(this)); //log every element found to console output });