4

jQueryを使用して、クラス'address-line'のdivをid'add-results'の別の要素に追加してから、新しく作成されたdivにいくつかの要素を追加する必要があります。次に、オブジェクトのアイテムごとにこれを繰り返します。

これが私が最終的にしようとしているものです：

<div id="add-results">    
  <div class="address-line">
    <h2>title 1</h2>
    <p>desc 1</p>
    <img src="thing1.png" />
  </div>
  <div class="address-line">
    <h2>title 2</h2>
    <p>desc 2</p>
    <img src="thing2.png" />
  </div>
  <!-- etc repeated on a loop -->
</div>

これが私が試した多くのことの1つです（chdataはオブジェクトであり、chvalueはデータを保持します）：

$.each(chdata, function(name, chvalue) {
  $('#add-results').append('<div class="address-line">');
  $('#add-results').append('<h2>'+chvalue['title']+'</h2>');
  // etc.. adding paragraph, an image, some links.
});

..しかしもちろん、その結果は次のようになります。

<div id="add-results">
  <div class="address-line"></div>
  <h2>title 1</h2>
  <p>desc 1</p>
  <img src="thing1.png" />
  <div class="address-line"></div>
  <h2>title 2</h2>
  <p>desc 2</p>
  <img src="thing2.png" />
</div>

私も使ってみました：

$('#add-results').append('<div class="address-line">')
.append('<h2>'+chvalue['title']+'</h2>');

..しかし同じ結果。どうすればこれを達成できますか？

4

2 に答える 2

5

メソッドを使用できます.appendTo。

$.each(chdata, function(name, chvalue) {    
  $('<div class="address-line">')
    .append('<h2>'+chvalue['title']+'</h2>')
    // etc.. adding paragraph, an image, some links.
    .appendTo('#add-results'); // at last appendTo the #add-results
});
于 2012-10-10T13:36:36.150 に答える
2

新しいdivを保存し、 appendを再利用する代わりにそれを参照します。.append追加されたアイテムではなく、追加する元の要素を返します。次のようなものを試してください。

var newdiv = $('<div>',{'class':'address-line'});
newdiv.append(...);
$('#add-results').append(newdiv);

アセンブル（値にHTMLを汚す可能性のあるものが含まれている場合に備えて、生のHTMLを渡すのではなく、jQueryと.textメソッドを利用することをお勧めしますが、それぞれに）：

$.each(chdata, function(name, chvalue) {
  // Create and store your new div
  var div = $('<div>',{'class':'address-line'});

  // append the new elements to it
  $('<h2>').text(chvalue['title']).appendTo(div);
  $('<p>').text(chvalue['description']).appendTo(div);
  $('<img>',{'src':chvalue['image']}).appendTo(div);

  // insert that new div into #add-results
  div.appendTo('#add-results');
});
于 2012-10-10T13:36:02.643 に答える