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.