Question

我需要使用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>

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

..但结果相同。我怎样才能做到这一点？

Answer 1

您可以使用.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
});

Answer 2

存储新div并引用而不是重复使用追加。 .append将返回您要追加的orignal元素，而不是附加的项目。尝试这样的事情：

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

使用jQuery追加div，然后将更多项添加到没有ID的新div中

2 个答案: