how to get children array of an element in jquery

Question

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

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?

Thnx.

Answer 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]).

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.

Answer 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'); }) 

Answer 3

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:

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.