How to iterate over children with for-loop

Question

I want to iterate over all childs of a jQuery's .children() return value, like this:

var childs = $element.children();        
for (var i = 1; i < childs.length - 1; i++)
    childs__.foo();

What do I have to write in the 3 line instead of __, to access the i-th child?

I want this becaus I want to access the (i-1)-th and (i+1)-th child in the loop, like this:

var childs = $element.children();        
for (var i = 1; i < childs.length - 1; i++)
{
    childs<<i>>.css('height', childs<<i - 1>>.height());
    childs<<i>>.css('width', childs<<i + 1>>.width());
}

So I assume the each() function will not work.

Strelok · Accepted Answer · 2012-03-22T09:50:25.673

18

childs is a javascript array. So you access objects within the array by childs[indexOfElement]. In your case childs[i].

var childs = $element.children();        
for (var i = 1; i < childs.length - 1; i++)
    childs[i].foo();

and

var childs = $element.children();        
for (var i = 1; i < childs.length - 1; i++)
{
    childs[i].css('height', childs[i-1].height());
    childs[i].css('width', childs[i+1].width());
}

BUT: Your code has an error. The element from the children collection is NOT a jQuery object. It's just an DOM element. So you have to wrap them in $(...) to use jQuery functions. So your code will become:

var childs = $element.children();        
for (var i = 1; i < childs.length - 1; i++)
{
    var thisElement = $(childs[i]);
    var next = $(childs[i+1]);
    var prev = $(childs[i-1]);
    thisElement.css('height', prev.height());
    thisElement.css('width', next.width());
}

PS. It should be named children. :)

edited Mar 22 '12 at 09:50

answered Mar 22 '12 at 09:42

Strelok

50,229
9
102
115

3

you should clarify that the OP would access the pure DOM node in this case, no jQuery object. – jAndy Mar 22 '12 at 09:44
@jAndy Yep, just realized that myself, after re-reading and updated the answer. Thanks! – Strelok Mar 22 '12 at 09:51
Strictly speaking, a jQuery object is not an array, it is *array-like*. – Felix Kling Mar 22 '12 at 10:26

score 2 · Answer 2 · answered Mar 22 '12 at 09:43

2

Wouldn't it be easier with this selector http://api.jquery.com/nth-child-selector/ ?

answered Mar 22 '12 at 09:43

slash197

9,028
6
41
70

score 2 · Answer 3 · edited Mar 22 '12 at 10:05

You could use the each() function, and use "this" to get the current object. Then you can use the next() and prev() functions instead of i+1 and i-1 respectively. I haven't tested the code so it may or may not work; hopefully points in the right direction :)

jQuery.each($element.children(), function() {
{
    $(this).css('height', $(this).prev().height());
    $(this).css('width', $(this).next().width());
}

MrCode · Answer 4 · 2012-03-22T10:01:02.817

1

The each() function will work, take a look at this:

$('#something').children().each(function(index) { 

    $(this).css('width',  (parseInt($(this).css('width').replace('px', '')) + index) + "px");

    // to access the previous and next element:
    $(this).prev().css('width', '100px');
    $(this).next().css('width', '200px');

});

That will modify the width, adding the index as a pixel on each iteration - just to demo how to get the index.

edited Mar 22 '12 at 10:01

answered Mar 22 '12 at 09:46

MrCode

63,975
10
90
112

so how do I access the (i-1)-th and (i+1)-th child in the loop? – user1027167 Mar 22 '12 at 09:51
I've updated the answer to show that using .prev() and .next() – MrCode Mar 22 '12 at 10:01

Niranjan Singh · Answer 5 · 2012-03-22T10:42:11.063

1

Use .eq() to get the one at the specified index of the matched dom elements set.

var childs = $element.children();        
for (var i = 1; i < childs.length - 1; i++)
{
    childs.eq(i).css('height', childs.eq(i - 1).height());
    childs.eq(i).css('width', childs.eq(i + 1).width());
}

and the another simple approach is to achieve this without for loop use .each()

jQuery.each($element.children(), function() {
{
    $(this).css('height', this.prev().height());
    $(this).css('width', this.next().width());
}

edited Mar 22 '12 at 10:42

answered Mar 22 '12 at 09:55

Niranjan Singh

18,017
2
42
75

"It's called .prev." as pimvdb mentioned :), but +1 for eq – user1027167 Mar 22 '12 at 10:04
and `this` is not a jQuery object so `.css()` does not exist. it should be `$(this).css()`. – MrCode Mar 22 '12 at 10:08

How to iterate over children with for-loop

5 Answers5

Linked