Question

对于数组中的每一行，我希望“for”循环输出一个[i]元素。例如，我希望下面的javascript在UI中吐出以下内容：

1 2 3

（当然，每个数字都将包含在div标签中。）

但是，正如您从JSFiddle演示中看到的那样，只有数组中最后一个元素的元素正在吐出！我的“for”循环有问题吗？

var myArray = [
  ['stringa', 'stringb', 'stringc', 1],
  ['stringd', 'stringe', 'stringf', 2],    
  ['stringg', 'stringh', 'stringi', 3]
];

for (var i=0; i< myArray.length; i++) {
$('#container').html('<div class="hidden caption' + i + '">' + myArray[i][3] + '</div>');
}

<div id="container"></div>

Answer 1

您替换每次迭代的所有内容，您需要附加新元素。

$('#container').append('<div class="hidden caption' + i + '">' + myArray[i][3] + '</div>');

Answer 2

您的问题是html v / s append。但你可以尝试这种方式。而不是在每次迭代时进行多次DOM操作，而不是在最后进行，这肯定会更好，特别是当你的数组中有很多项时。

var myArray = [
      ['stringa', 'stringb', 'stringc', 1],
      ['stringd', 'stringe', 'stringf', 2],    
      ['stringg', 'stringh', 'stringi', 3]
    ];

var $els = $.map(myArray, function(val, i){ //Convert one collection collection to another using map
  return '<div class="hidden caption' + i + '">' + val[3] + '</div>';
});

$('#container').html($els); //append it at the end.

<强> Demo

Answer 3

正如@epascarello所说，你每次迭代都会覆盖html。

此外，您应尽量避免在可能的情况下更改DOM。在这种情况下，将标记存储在变量中，并在for循环后更新DOM。解决您的问题，加上只有1个DOM更改。

var html = '';
for (var i=0; i< myArray.length; i++) {
    html += '<div class="hidden caption' + i + '">' + myArray[i][3] + '</div>';
}
$('#container').html(html);

Updated JSFiddle

如何在javascript for循环中输出数组中的元素？

3 个答案: