javascript - For 循环没有按预期工作(使用 jQuery)

Question

我了解使用 JavaScript 的 for 循环的基本前提，但是 .each 的使用让我难以理解。

var col = [1, 2, 3, 4, 5, 6];

for (var i = 0; i < col.length; i++) {
    $('p').html(col[i]);
}

产生的结果:

<p> 6 </p>
<p> 6 </p>
<p> 6 </p>

当我期待的时候:

<p> 1 </p>
<p> 2 </p>
<p> 3 </p>

为什么这没有按预期工作，如何使用 jQuery 而不是纯 JavaScript 来完成？

http://jsfiddle.net/rgD92/2/

Answer 1

See the code below :

var col = [1, 2, 3, 4, 5, 6];
$('p').each(function(index){
    $(this).text(col[index]);
});

为什么您的代码不起作用？

当您在循环中迭代“col”列表时，您获取了所有引用 <p>元素，当最后一次交互发生时，数字 6 将设置在所有 <p> 中元素。

更新:

如果你有更多<p> col 中的元素比数字列表，你可以使用 %运算符(operator)喜欢下面的代码:

var col = [1, 2, 3, 4, 5, 6];

$('p').each(function(index){
    $(this).text(col[index % col.length]);
});

Demo

希望对您有所帮助。