Каждый 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

Предыдущие изменения перезаписываются. Это эквивалентно делать это:

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

(очевидно, это другой язык программирования)

Ответ выше будет "9" вместо ожидаемого ответа.

Вам необходимо добавлять каждый HTML-вызов.

Edit:

Черт побери, люди избивают меня ...: - (

Answer 3

Вы перезаписываете его на каждой итерации.Вам нужно сделать как

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

отредактировано, чтобы исправить ошибку

Answer 4

Поскольку некоторым людям нравится понижать голос из-за неэффективности ... это было бы более эффективно, так как он выбирает узел только один раз

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

Answer 5

Нужно ли для этого использовать jQuery, почему бы просто не использовать простое:

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

Совет: я бы не использовал id object на любом языке