如何使用 jQuery 遍历 div 的子元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3024391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I iterate through children elements of a div using jQuery?
提问by Shamoon
I have a div and it has several input elements in it... I'd like to iterate through each of those elements. Ideas?
我有一个 div 并且它有几个输入元素......我想遍历这些元素中的每一个。想法？
回答by Andy E
Use children()and each(), you can optionally pass a selector to children
使用children()and each()，您可以选择将选择器传递给children
$('#mydiv').children('input').each(function () {
alert(this.value); // "this" is the current element in the loop
});
You could also just use the immediate child selector:
您也可以只使用直接子选择器：
$('#mydiv > input').each(function () { /* ... */ });
回答by Liquinaut
It is also possible to iterate through all elements within a specific context, no mattter how deeply nested they are:
也可以遍历特定上下文中的所有元素，无论它们嵌套多深：
$('input', $('#mydiv')).each(function () {
console.log($(this)); //log every element found to console output
});
The second parameter $('#mydiv') which is passed to the jQuery 'input' Selector is the context. In this case the each() clause will iterate through all input elements within the #mydiv container, even if they are not direct children of #mydiv.
传递给 jQuery 'input' Selector 的第二个参数 $('#mydiv') 是上下文。在这种情况下，each() 子句将遍历#mydiv 容器中的所有输入元素，即使它们不是#mydiv 的直接子元素。
回答by tomloprod
If you need to loop through child elements recursively:
如果您需要递归遍历子元素：
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"));
NOTE:In this example I show the events handlers registered with an object.
注意：在这个例子中，我展示了用一个对象注册的事件处理程序。
回答by Umar Asghar
It can be done that way as well.$('input', '#div').each(function () {
console.log($(this)); //log every element found to console output
});
也可以这样做。$('input', '#div').each(function () {
console.log($(this)); //log every element found to console output
});
回答by Surya Swanoff
$('#myDiv').children().each( (index, element) => {
console.log(index); // children's index
console.log(element); // children's element
});
This iterates through all the children and their element with index value can be accessed separately using elementand indexrespectively.
这将遍历所有子元素，并且可以分别使用element和index分别访问具有索引值的元素。
回答by Dan185
children() is a loop in itself.
children() 本身就是一个循环。
$('.element').children().animate({
'opacity':'0'
});
回答by Basheer AL-MOMANI
I don't think that you need to use each(), you can use standard for loop
我认为您不需要使用 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");
}
this way you can have the standard for loop features like breakand continueworks by default
这样你可以有循环的标准功能，如break与continue缺省的工作
also, the debugging will be easier
此外，该 debugging will be easier
