如何使用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 });