Append array item to DOM element with corresponding index (jQuery)

Question

Lets say I have three divs in my HTML

<div>
    <h2>This is div 1</h2>
</div>
<div>
    <h2>This is div 2</h2>
</div>
<div>
    <h2>This is div 3</h2>
</div>

Also, I have a JavaScript array made of three nested arrays:

var array = [ 
    [ "<p>Bla bla</p>", "<p>Other stuff</p>"], 
    [ "<p>Another paragraph</p>"], 
    [ "<p>Yet another</p>", "<p>yes</p>", "<p>yes</p>" ] 
    ];

I am sure that this array will always have three members, just like the number of divs.

What I want to do is append the content of each of the nested arrays of the main array to the div with the corresponding number.

Something like:

for ( var i = 0; i < array.length; i++ ) {
    $('div').eq( i ).append( array[i] );
}

The above code doesn't work but I think my intention is clear.

You can find a working example here => http://jsfiddle.net/G8BsK/

Thanks.

user1106925 · Accepted Answer · 2012-05-02 16:28:58Z

5

Change this...

.append( array[i] );

to this...

.append( array[i].join('') );

Although I would highly recommend taking the DOM selection out of the loop, and caching it.

var divs = $('div');
for ( var i = 0; i < array.length; i++ ) {
    divs.eq( i ).append( array[i].join('') );
}

...or just do this...

$('div').append(function(i) {
    return array[i].join('');
});

answered May 2, 2012 at 16:28

community wiki

user1106925

Sign up to request clarification or add additional context in comments.

1 Comment

Maverick Over a year ago

Yes, thanks, it works like this. I forgot to join them. :) Btw in my actual code I have the dom elements cached.

Nicola Peluchetti · Accepted Answer · 2012-05-02 16:33:02Z

0

You should do

var array = [
    ["<p>Bla bla</p>", "<p>Other stuff</p>"],
    ["<p>Another paragraph</p>"],
    ["<p>Yet another</p>", "<p>yes</p>", "<p>yes</p>"]
    ];

for (var i = 0; i < array.length; i++) {
    var arr = array[i];
    for (var m = 0; m < arr.length; m++) {
        $('div').eq(i).append(arr[m]);
    };
}

http://jsfiddle.net/G8BsK/2/

answered May 2, 2012 at 16:33

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Comments

broox9 · Accepted Answer · 2012-05-02 16:42:29Z

0

it's because the array values being appended are arrays themselves, not the html strings. You have to join them.

    for ( var i = 0; i < array.length; i++ ) {
        $('div').eq( i ).append( array[i].join('') );
    }

will work. the only difference is the 'array[i].join('')

answered May 2, 2012 at 16:42

broox9

655 bronze badges

Collectives™ on Stack Overflow

Append array item to DOM element with corresponding index (jQuery)

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related