使用for循环显示div [英] Display div using for loop

问题描述

我有一个HTML结构:

I have a HTML structure:

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

我的目标是在.item中显示10个图像，这些图像将包含在.ttlpadding中，这些图像将包含在.ttl中.因此，每个.item及其对应的单个图片都会有一个.ttl.

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.

我的JQuery代码:

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

当前，所有十个图像都包含在单个".item"中，因此也包含在单个".ttl"中.我尝试了许多变体，但找不到正确的方法.

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.

推荐答案

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

这将选择.ttl(第一个)，转到其父级，并添加必要的div和图像代码.

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

这篇关于使用for循环显示div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！