CODEWITHSUNDEEP
jqueryfor-loop
user188995
user188995

Reputation: 557

Display div using for loop

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.

Upvotes: 1

Views: 2530

Answers (6)

forforf
forforf

Reputation: 925

You're appending your images to class "item" which is inside your "ttl". If you want ten items of class "ttl" you'll need to append to the parent class of "ttl". For example:

HTML:

<div class="container">
</div>

Javascript/JQuery

htmlToAppend = "
  <div class="ttl">
     <div class="ttlpadding">
         <div class="item"></div>
     </div>
  </div>
 "; //may not be valid javascript but it should give you the right idea.

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

Or what everyone else said. Pick the one you like best.

Upvotes: 0

Bernhard
Bernhard

Reputation: 8831

Your appending to the inner div. Use jquery clone function to duplicate the outer ttl div. The doc of the clone function has an example explaining what you want. http://api.jquery.com/clone/

Basically it would look like this:

var clone = $('.ttl').clone().filter('.item').append(your_html_from_your_example);

You still need to put this new clone object into your DOM. Probably append to the parent of ttl:

$('.ttl').parent().append(clone);

Upvotes: 0

Oriol
Oriol

Reputation: 288170

You could use:

var original=$(".ttl")[0];
for (var i = 0; i < 10; i++) {
  var el=original.cloneNode(true);
  el.firstChild.firstChild.innerHTML="<a href='" + data.data[i].images.standard_resolution.url +"' ><img src='" + data.data[i].images.thumbnail.url +"' /></a>";
  document.body.appendChild(el);
}

Upvotes: 0

Hazem Salama
Hazem Salama

Reputation: 15111

Your ten items are inside the single "ttl" because that's where you are attaching them to $(".item").append........

You need to attach them to a higher element in the hierarchy.

Upvotes: 1

adeneo
adeneo

Reputation: 318212

If you're having trouble creating the wanted html structure, do it the old fashion way :

var html='';

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

Upvotes: 0

VoronoiPotato
VoronoiPotato

Reputation: 3173

$('.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.

Upvotes: 1

Related Questions