2

JSFiddle はこちら: http://jsfiddle.net/xgTt2/3/

の中に$.eachネストされた があり$.each、2 番目が 2 回実行されている理由がわかりません$.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/

4

3 に答える 3

3

終わり近くに、クラスを持つ2つの要素があります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/

于 2013-01-18T02:29:33.543 に答える
1

答えは次のとおりです。

http://jsfiddle.net/7EmsX/

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];
    var $orderItem = $('<p class="orderitem">' + pos.Id + '</p>');
    $orderItem.appendTo('#placeholder');
    $.each(pos.OrderItems, function (index) {
        $orderItem.append('<p>' + this.Id + ' ' + this.Description + '</p>')
    });
});

.orderitemクラスを選択するposと、すべてのアイテムが選択され、サブアイテムが挿入されます。代わりに、現在のアイテムにのみサブアイテムを挿入しますpos。

于 2013-01-18T02:29:41.483 に答える
0

2回目のループ実行では、$('.orderitem')すべての<p class="orderitem"></p>

以下をお試しください：

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];
  var orderitemHTML = '';
  orderitemHTML += '<p class="orderitem">' + pos.Id + '</p>';

  $.each(pos.OrderItems, function (index) {
    orderitemHTML += '<p>' + this.Id + ' ' + this.Description + '</p>';
  });
  $('#placeholder').append(orderitemHTML);
});
于 2013-01-18T02:30:21.753 に答える