javascript - 为什么 jquery.each 执行两次？

Question

JSFiddle在这里:http://jsfiddle.net/xgTt2/3/

我有一个 $.each 嵌套在 $.each 中，我不确定为什么第二个 $.each正在运行两次。有什么想法吗？

var serverResponse = [{"Id":"aaa","OrderItems":[{"Id":1,"Description":"Salad"},{"Id":2,"Description":"Pizza"}]},{"Id":"bbb","OrderItems":[{"Id":3,"Description":"Salad"},{"Id":4,"Description":"Pizza"}]}];

$.each(serverResponse, function (index) {
  var pos = serverResponse[index];

  $('#placeholder').append('<p>' + pos.Id + '</p>')

  $.each(pos.OrderItems, function (index) {
     $('.orderitem').append('<p>' + this.Id +  
                       ' ' + this.Description + '</p>')
  });

});

上面的 JavaScript 产生以下输出:

aaa
1 Salad
2 Pizza
3 Salad
4 Pizza
bbb
3 Salad
4 Pizza

我想要这个:

aaa
1 Salad
2 Pizza
bbb
3 Salad
4 Pizza

知道我做错了什么吗？这是该问题的一个工作示例:http://jsfiddle.net/xgTt2/3/

Answer 1

接近尾声时，您将看到两个具有 orderitem 类的元素。使用 $('.orderitem').append() 将追加到两者。

相反，您想要附加到您创建的最后一个元素。

var $order_item = $('<p class="orderitem">' + pos.Id + '</p>');
$('#placeholder').append($order_item);

$.each(pos.OrderItems, function (index) {
  $order_item.append('<p>' + this.Id +  
                       ' ' + this.Description + '</p>');
});

http://jsfiddle.net/xgTt2/4/