Question

I have the following HTML that I want to repeat 5 times within a div container (.container).

<div class="block">
   <div class="name">Name</div>
   <div class="content>Content</div>
</div>

Using jQuery/JS, I want to create an array (or some other kind of organization structure), that when run through a for loop could CHANGE the ‘Name’ and ‘Content’ of each block.

For example, I have two arrays:

var names = ["Joe","Jane","Bill","Nicole","Dennis"];
var content = ["First content","Second content","Third content","Fourth content","Fifth content"]

I want to clone the top HTML and for each block, change the name and content to its respective array item. How can I do this?

Right now, I have the code to just repeat the HTML.

var row = $('.block');

for(var i = 0; i < 5; i++ )
  $('.container').append(row.clone())
}

Edit: Is there a better way to do this without creating multiple arrays?

Answer 1

You can use find and text methods and change the content of elements before appending them, note that you are missing opening { for the for block.

for (var i = 0; i < 5; i++) {
   row.clone()
      .find('.name').text(names[i]).end()
      .find('.content').text(content[i]).end()
      .appendTo('.container')
}

http://jsfiddle.net/SU3vF/