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

Heres my element, i want to arrange the children inside it by looping through them.

继承我的元素，我想通过循环它们来安排孩子们。

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

Heres how i imagine the code should look but children(), of course, doesn't return an array of the children

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

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

The question - can i get children array for use in a loop? I know i can attach a function for each of children to be executed on, but can i get that increasing "i" in there?

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

Thnx.

日Thnx。

9 个解决方案

#1

children() returns a jQuery object of the children which resembles an array of DOM nodes. Your problem is inside the loop - when you access individual objects with [] you get back plain DOM nodes which don't have a css method. Either use .eq(i) or $(children[i]).

children（）返回子节点的jQuery对象，类似于DOM节点数组。你的问题在循环中 - 当你使用[]访问单个对象时，你会得到没有css方法的普通DOM节点。使用.eq（i）或$（children [i]）。

Or just use the each() method, which lets you do the same without having to write a for loop by hand. Read the docs to find out how to get the index of the element inside the callback.

或者只使用each（）方法，这样您就可以不必手动编写for循环。阅读文档以了解如何获取回调内元素的索引。

#2

This is the correct way.

这是正确的方法。

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

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

or actually this is better.

或者实际上这更好。

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

#3

children() returns a set of jQuery objects and children[i(anyNumber)] will return the dom element. So calling css jQuery method on dom element will through an error. You should use eq method if you want to access any particular element at a given index. Try this.

children（）返回一组jQuery对象，子节点[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() reference: http://api.jquery.com/eq/

.eq（）参考：http：//api.jquery.com/eq/

#4

Many jQuery methods let you pass a function directly in place of the new value you want assigned.

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

For your example...

以你为榜样......

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

So here I called .css() directly on the .children() set, and instead of a number for the 'left' value, I gave a function.

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

The function is invoked once for each element. The parameters represent the index of the current iteration, and the current css value of the current element in the iteration.

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

The return value of the function will be used as the value to set on the current element.

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

#5

The other answers to use jQuery's children().each() are likely helpful for most cases. However, if you do need an actual javascript Array, you can do the following:

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

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

This would allow you have a real array for use in a loop or with other functions that require an array as a parameter.

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

#6

This works fine for me

这对我来说很好

$(document).ready(function(){

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

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

jsFiddle Example

jsFiddle示例

#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>

#8

Use jQuery:

使用jQuery：

.each() get allow to each index of array with childrens of $('#someObject'):

.each（）得到允许带有子元素$（'＃someObject'）的数组的每个索引：

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

#9

Little touch and code is working.

一点点触摸和代码工作。

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

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

Your code is ok except $(children[i]) and define children as array with .toArray()

您的代码没有问题，除了$（children [i]）并使用.toArray（）将子节点定义为数组

#1