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

Question

我有一个 div，里面有几个输入元素...我想迭代每个元素。有想法吗？

Answer 1

使用 children() 和 each()，您可以选择将选择器传递给 children

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

您也可以只使用直接子选择器：

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

Answer 2

还可以迭代特定上下文中的所有元素，无论它们嵌套的深度如何：

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

传递给 jQuery 'input' 选择器的第二个参数 $('#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

$('#myDiv').children().each( (index, element) => {
    console.log(index);     // children's index
    console.log(element);   // children's element
 });

这将遍历所有子元素，并且可以分别使用 element 和 index 分别访问具有索引值的子元素。

Answer 5

也可以这样完成：

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

Answer 6

我认为您不需要使用 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 默认情况下

也可以工作，调试会更容易

Answer 7

Children() 本身就是一个循环。

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

Answer 8

它与 .attr('value') 一起使用，用于元素属性

$("#element div").each(function() {
   $(this).attr('value')
});