Question

继承我的元素，我想通过循环遍历它们中的孩子。

<div id="animDummy1">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

下面我想象代码看起来如何，但是children（）当然不返回子代数组

var children=$('#animDummy1').children();
for(var i=0;i<children.length;i++){
    children[i].css('left',i*120+'px');
}

问题 - 我可以在循环中使用子数组吗？我知道我可以为每个要执行的孩子附加一个函数，但是我可以在那里增加“i”吗？

日Thnx。

Answer 1

children()返回子节点的jQuery对象，类似于DOM节点数组。你的问题在循环内部 - 当你使用[]访问单个对象时，你会得到那些没有css方法的纯DOM节点。使用.eq(i)或$(children[i])。

或者只使用each()方法，这样您无需手动编写for循环即可执行此操作。阅读文档以了解如何在回调中获取元素的索引。

Answer 2

这是正确的方法。

var children=$('#animDummy1').children();

children.each(function(idx, val){
   $(this).css('left',idx*120+'px');
});

或实际上这更好。

$('#animDummy1').children().each(function(idx, val){
   $(this).css('left',idx*120+'px');
})

Answer 3

children()返回一组jQuery对象，children[i(anyNumber)]将返回dom元素。所以在dom元素上调用css jQuery方法将会出错。如果要访问给定索引处的任何特定元素，则应使用eq方法。试试这个。

var children = $('#animDummy1').children();
for(var i = 0;i < children.length;i++){
    children.eq(i).css('left', (i*120+'px') );
}

.eq()参考：http://api.jquery.com/eq/

Answer 4

许多jQuery方法允许您直接传递函数来代替您想要分配的新值。

以你的例子......

$('#animDummy1').children().css('left', function(i, curr_left) {
    return i * 120;
});

所以在这里我直接在.css()集上调用.children()，而不是'left'值的数字，我给了一个函数。

为每个元素调用一次该函数。参数表示当前迭代的索引，以及迭代中当前元素的当前css值。

函数的return值将用作在当前元素上设置的值。

Answer 5

使用jQuery＆＃39; children().each()的其他答案可能对大多数情况有帮助。但是，如果确实需要实际的javascript数组，则可以执行以下操作：

var childrenArray = $('#animDummy1').children().toArray();

这将允许你有一个真正的数组用于循环或其他需要数组作为参数的函数。

Answer 6

这对我来说很好用

$(document).ready(function(){

    var children = $('#animDummy1').children();        

    $(children).each(function(index, item){                 
        console.log(index);            
    });           
});

jsFiddle Example

Answer 7

    $(function () {
        var sortOrder = [3, 4, 1, 5,2];
        var onLoad = $('#parentDiv>p').get();
        for (var i = 0; i < onLoad.length; i++) {
            var inRearranging = $('#parentDiv>P').get();
            var orderingID = "#paragraph" + sortOrder[i];
            $(orderingID).insertBefore("#" + inRearranging[i].id);
        }
    });



<div id="parentDiv">
    <p id="paragraph1">1</p>
    <p id="paragraph2">2</p>
    <p id="paragraph3">3</p>
    <p id="paragraph4">4</p>
    <p id="paragraph5">5</p>
</div>

Answer 8

使用jQuery：

.each（）允许使用$（'＃someObject'）子项的数组的每个索引：

$('#animDummy1').each(function(index, item) {
   // Do Something with each $(item) children of #animDummy with index
});

Answer 9

一点点触摸和代码都起作用。

var children=$('#animDummy1').children().toArray();

var children=$('#animDummy1').children();
for(var i=0;i<children.length;i++){
    $(children[i]).css('left',i*120+'px');
}

除 $（children [i]）之外，您的代码还可以，并使用 .toArray（）

将子级定义为数组

如何在jquery中获取子元素的数组

9 个答案: