1

私はHTML構造を持っています:

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

私の目的は、.ttl に含まれる .ttlpadding に含まれる .item 内に 10 個の画像を表示することです。したがって、個々の .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>");
}

現在、10 個の画像すべてが 1 つの「.item」に含まれているため、1 つの「.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

あなたの10個のアイテムは、単一の「ttl」の中にあります。 $(".item").append........

それらを階層内のより高い要素にアタッチする必要があります。

于 2012-08-13T18:17:23.073 に答える
0

内部divへの追加。jqueryclone関数を使用して、外側のttldivを複製します。クローン関数のドキュメントには、必要なものを説明する例があります。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」内にあるクラス「item」に画像を追加しています。クラス「ttl」の項目が 10 個必要な場合は、「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 に答える