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

您需要在每次迭代中选择要更新的p，以更新文档中的所有p元素。

在给定的示例中，您可以使用.eq()按顺序选择p元素。

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

演示：Fiddle

Answer 2

你可以这样做：

$('p').text(function(i){
    return col[i];
});

JS Fiddle demo

这将允许jQuery迭代集合本身，而不是使用显式的for循环。

如果您对其他答案的评论建议，您希望循环col文本/内容，那么数组是否应短于p元素的数量：

$('p').text(function(i){
    return col[i % col.length];
});

JS Fiddle demo

参考文献：

• JavaScript Arithmetic Operators。
• text()。

Answer 3

See the code below：

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

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

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

<强>更新

如果<p>列表中的col元素数量多于%，则可以使用var col = [1, 2, 3, 4, 5, 6]; $('p').each(function(index){ $(this).text(col[index % col.length]); }); 运算符，如下面的代码所示：

{{1}}

Demo

我希望这会有所帮助。

Answer 4

使用jQuery和each()，您可以：

var col = [1, 2, 3, 4, 5, 6];
$("p").each(function(i) {
    $(this).html(col[i]);
});

Answer 5

您的$('p')选择器会选择页面上的所有p，并且您的循环也会更新所有p。

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

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

JSFiddle