jQuery的各不對象的每個元件執行的HTML

Question

下面的代碼：

var object = [ 
    {'item1': 'value1a', 'item2':'value2a', 'item3':'value3a'}, 
    {'item1': 'value1b', 'item2':'value2b', 'item3':'value3b'}, 
]; 


$.each(object, function(key,value) { 
    $('.my-div').html('<li>'+ value.item1 + '</li>'); 
}); 

這僅輸出一個<li>value1b</li>。出於某種原因跳過除了最後一次迭代之外的所有內容。

想法？

Answer 1

它覆蓋了所有的HTML而不是附加它。

變化

$('.my-div').html('<li>'+ value.item1 + '</li>'); 

到

$('.my-div').append('<li>'+ value.item1 + '</li>'); 

工作演示：http://jsfiddle.net/AlienWebguy/hpLa6/1/

Answer 2

您在每次迭代覆蓋它。你需要做的像

$('.my-div').html($('.my-div').html()+'<li>'+ value.item1 + '</li>');

編輯以修正錯誤

Answer 3

是否有必要使用jQuery這一點，爲什麼不直接使用一個簡單的：

for (var obj in objects) { 
    $('.my-div').append('<li>'+ obj.item1 + '</li>'); 
} 

提示：我會避免使用任何語言的編號object

Answer 4

以前的編輯被覆蓋。它這樣做相當於：

int total = 0; 
for (int x=0;x<10;++x) 
    total = x; 

（明顯不同的編程語言）

以上的答案是「9」，而不是預期的答案。

您需要附加每個html調用。

編輯：

哇靠人打我...... :-(

Answer 5

由於一些人喜歡，因爲低效率的，以downvote ...這會更有效，因爲它選擇的節點只有一次

$(function(){ 
     var object = [ 
      {'item1': 'value1a', 'item2':'value2a', 'item3':'value3a'}, 
      {'item1': 'value1b', 'item2':'value2b', 'item3':'value3b'}, 
     ]; 

    var content = ''; 
    $.each(object, function(key,value) { 
     content += '<li>'+ value.item1 + '</li>';  
    }); 
    $('.my-div').html(content); 
});