For 循环未按预期工作（使用 jQuery）答案

【问题标题】：For loop not working as expected (with jQuery)For 循环未按预期工作（使用 jQuery）
【发布时间】：2013-12-06 04:10:15
【问题描述】：

我了解使用 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 来完成？

【问题讨论】：

【解决方案1】：

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

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

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

演示：Fiddle

【讨论】：

【解决方案2】：

您的$('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]);
}

【讨论】：

【解决方案3】：

你可以这样做：

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

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

如果，正如您对另一个答案的评论所暗示的那样，您希望 col 文本/内容循环，数组是否应该短于 p 元素的数量：

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

参考资料：

【讨论】：

【解决方案4】：

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

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

【讨论】：

【解决方案5】：

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 列表中的数字，则可以使用% 运算符，如下代码所示：

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

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

我希望这会有所帮助。

【讨论】：