我如何使用jQuery迭代一个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
});

第二个参数$('#mydiv')传递给jQuery 'input'选择器是上下文。在这种情况下，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
});

小开

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

小开

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

这将遍历所有的子元素，并且它们的带有索引值的元素可以分别使用元素和指数访问。

小开

它使用.attr('value')来处理元素属性

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