1

我有一个 HTML 结构：

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

我的目标是在 .item 中显示 10 张图像，这些图像将包含在 .ttlpadding 中，而 .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”中。我尝试了很多变化，但无法找出正确的方法。

4

6 回答 6

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 和图像代码。

于 2012-08-13T18:15:22.407 回答
1

您的十件物品在单个“ttl”内，因为这是您将它们附加到的地方 $(".item").append........

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

于 2012-08-13T18:17:23.073 回答
0

您附加到内部 div。使用 jqueryclone函数复制外部 ttl div。克隆函数的文档有一个解释你想要什么的例子。http://api.jquery.com/clone/

基本上它看起来像这样：

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

你仍然需要把这个新的克隆对象放到你的 DOM 中。可能附加到 ttl 的父级：

$('.ttl').parent().append(clone);
于 2012-08-13T18:15:36.373 回答
0

如果您在创建所需的 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);
于 2012-08-13T18:16:27.963 回答
0

你可以使用：

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);
}
于 2012-08-13T18:18:41.110 回答
0

您将图像附加到“ttl”内的“项目”类。如果你想要十个“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);
}

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

于 2012-08-13T18:21:34.290 回答