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.

Solution 1

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. :)

Solution 2

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

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

Comments

[jAndy]

you should clarify that the OP would access the pure DOM node in this case, no jQuery object.

[Strelok]

@jAndy Yep, just realized that myself, after re-reading and updated the answer. Thanks!

[user1027167]

so how do I access the (i-1)-th and (i+1)-th child in the loop?

[MrCode]

I've updated the answer to show that using .prev() and .next()

[user1027167]

"It's called .prev." as pimvdb mentioned :), but +1 for eq

[MrCode]

and this is not a jQuery object so .css() does not exist. it should be $(this).css().

[Felix Kling]

Strictly speaking, a jQuery object is not an array, it is array-like.