0

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

对于数组中的每一行，我希望“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>
4

3 回答 3

2

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

$('#container').append('<div class="hidden caption' + i + '">' + myArray[i][3] + '</div>');
于 2013-10-15T00:41:48.573 回答
1

你的问题是htmlv/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.

演示

于 2013-10-15T00:45:30.340 回答
1

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

于 2013-10-15T00:56:28.480 回答