Question

我有一个HTML结构：

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

我的目标是在.item中显示10个图像，这些图像将包含在.ttlpadding中，它将包含在.ttl中。因此，每个人.item及其相应的个人形象都会有个人.ttl。

我的JQuery代码：

    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”。我尝试了很多变化，但无法找出正确的方法。

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

选择.ttl（第一个），转到它的父级，并添加必要的div和图像代码。

Answer 2

你的十件物品都在单个“ttl”内，因为那是你把它们连接到的地方 $(".item").append........

您需要将它们附加到层次结构中的更高元素。

Answer 3

你附加到内部div。使用jquery clone函数复制外部ttl div。克隆函数的doc有一个例子来解释你想要的东西。 http://api.jquery.com/clone/

基本上它看起来像这样：

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

您仍然需要将此新克隆对象放入DOM中。可能附加到ttl的父级：

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

Answer 4

如果您在创建想要的html结构时遇到问题，请按照旧方式进行：

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

Answer 5

您可以使用：

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

Answer 6

您将图像附加到“ttl”内的“item”类。如果你想要10个类“ttl”，你需要附加到“ttl”的父类。例如：

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

或者其他人说的话。选择你最喜欢的那个。

使用for循环显示div

6 个答案: