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

How do I output an element from an array in a javascript for loop?

本文关键字：数组 输出 元素 循环 javascript for      更新时间：2023-09-26

演示： http://jsfiddle.net/gc9S3/10/

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

123

（当然，每个数字都将包装在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>

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

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

您的问题是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.

演示

正如@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);

更新的 JSFiddle

相关文章：