For循环未按预期工作(使用jQuery）

For loop not working as expected (with jQuery)

本文关键字：使用 jQuery 工作 循环 For      更新时间：2023-09-26

我理解使用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/

请参阅下面的代码：

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]);
});

演示

我希望这能有所帮助。

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

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

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

演示：Fiddle

您可以简单地执行：

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

JS Fiddle演示。

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

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

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

JS Fiddle演示。

参考文献：

  • JavaScript算术运算符
  • text()

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

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

$('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

相关文章：