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.

Matti Virkkunen · Accepted Answer · 2014-10-10T18:28:07.893

34

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.

edited Oct 10 '14 at 18:28

answered Feb 05 '12 at 18:23

Matti Virkkunen

63,558
9
127
159

3

This isn't really correct - `children()` returns a jQuery object not an array. It does have "indexes" that can be used by jQuery.each(), but it's not of type array. Try using `children().toArray()` if you'd like to get an actual array. To confirm this, try out `children() instance of Array` vs `children().toArray() instanceof Array` :) – Jason Oct 10 '14 at 17:52
@Jason: Fine, I guess my language wasn't 100% exact. – Matti Virkkunen Oct 10 '14 at 18:30

score 13 · Answer 2 · answered Feb 05 '12 at 18:23

13

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

answered Feb 05 '12 at 18:23

thenetimp

9,487
5
29
42

And where is "i" being defined/increased? – Martin Feb 05 '12 at 18:25
Need to define the i variable. Should be function(i), or define it in the function. – bozdoz Feb 05 '12 at 18:27

score 8 · Answer 3 · edited Apr 18 '15 at 14:58

8

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.

edited Apr 18 '15 at 14:58

divykj

576
6
12

answered Oct 10 '14 at 17:55

Jason

2,691
27
28

Most helpful answer for my situation where I simply needed JS arrays to use with concat() – Velojet Apr 19 '17 at 04:45

score 4 · Answer 4 · answered Feb 05 '12 at 18:28

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.

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/

score 4 · Answer 5 · answered Feb 05 '12 at 18:28

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

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.

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.

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

That is pretty sweet. I did not know I could do it that way! — thenetimp, Feb 05 '12 at 18:30
@thenetimp: Yeah, it can be pretty convenient. Quite a few jQuery functions have this option. — , Feb 05 '12 at 18:33

Ivan Trubnikov · Answer 6 · 2017-02-09T21:25:14.687

2

Use jQuery:

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

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

edited Feb 09 '17 at 21:25

answered Feb 09 '17 at 17:12

Ivan Trubnikov

177
1
8

Please elaborate your answer. – Jensd Feb 09 '17 at 20:09

Gabe · Answer 7 · 2012-02-05T18:29:19.220

2

This works fine for me

$(document).ready(function(){

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

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

jsFiddle Example

edited Feb 05 '12 at 18:29

answered Feb 05 '12 at 18:23

Gabe

49,577
28
142
181

score 1 · Answer 8 · answered Aug 04 '18 at 10:59

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()

score 0 · Answer 9 · answered Feb 25 '15 at 12:33

    $(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>

how to get children array of an element in jquery

9 Answers9

Linked