Question

I have a HTML structure:

<div class="ttl">
   <div class="ttlpadding">
      <div class="item"></div>
   </div>
</div>

My aim is to display 10 images inside .item which will be contained in .ttlpadding which will be contained in .ttl.
So, there will be individual .ttl for each individual .item and its corresponding individual image.

My JQuery code:

    for (var i = 0; i < 10; i++) {
       $(".item").append("<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>");
}

Currently, all the the ten images are getting contained inside a single “.item” and hence a single “.ttl”. I’ve tried many variations but can’t figure out the correct way.

Answer 1

$('.ttl').first().parent().append(
"<div class="ttl">
   <div class="ttlpadding">
      <div class="item">" + 

"<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>" +
"</div>
   </div>
</div>"
); 

This selects .ttl (the first one), goes to it’s parent, and adds the necessary divs and image code.