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

之前的修改正在被覆盖。它相当于这样做：

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

（显然是一种不同的编程语言）

上述答案将是“9”而不是预期答案。

您需要附加每个html调用。

编辑：

神圣的废话人们打败了我......： - （

Answer 4

为此需要使用jQuery，为什么不使用简单的：

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

提示：我会避免在任何语言中使用ID object

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

jQuery每个都不为对象中的每个元素执行html

5 个答案: