4

我需要使用 jQuery 将一个带有“地址行”类的 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>

这是我尝试过的许多事情之一（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);

已组装（我更喜欢利用 jQuery 和该.text方法而不是传递原始 HTML，以防该值包含可能破坏 HTML 的内容，但对每个人都是他/她自己的）：

$.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 回答