爲什麼jquery.each執行兩次？

的jsfiddle這裏：http://jsfiddle.net/xgTt2/3/爲什麼jquery.each執行兩次？

我有一個嵌套的$.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/

來源

2013-01-18 Fred

是否有可能對我產生我提到有第二個輸出？（aaa，1個沙拉，2個比薩，bbb，3個沙拉，4個比薩餅）......陣列中的「orderitem」部分可能有任意數量的項目，我不想對這樣的東西進行硬編碼：pos.OrderItems [0] .Description ... – Fred

感謝大家的幫助！ – Fred

接近尾聲時，您有兩個元素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-18 02:29:33 Eevee

Ahhhhh ...這很有道理！非常感謝Eevee！那是我用頭撞牆......再次感謝！ – Fred

它有助於將'alert（）'和'console.log（）'分開來看看發生了什麼。如果你使用'console.log（some_jquery_set.get（））'，你可以看到jQuery中的東西是一個常規的javascript數組。 – Eevee

太棒了。我從來沒有想過如何使用$ .get。謝謝！ – Fred

這裏的答案：

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-18 02:29:41

在第二循環運行，$('.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-18 02:30:21

爲什麼jquery.each執行兩次？

回答

相關問題