同时循环两个jQuery对象

Loop through two jQuery objects simultaneously

本文关键字：两个 jQuery 对象 循环      更新时间：2023-09-26

我有两个长度相等的jQuery对象。

var foos = $('.foo');
var bars = $('.bar');

如果这些是数组，我可以使用它们的索引对它们进行循环，如下所示：

for(var i = 0; i < foos.length; i++){
    foos[i].html(bars[i].html());
}

但是以这种方式引用jquery对象会返回节点本身，而不是特定的匹配jquery对象。可以这样修复：

for(var i = 0; i < foos.length; i++){
    $(foos[i]).html($(bars[i]).html());
}

但这并不干净/易读，而且我认为效率低下。有没有其他方法可以同时循环通过两个jQuery对象？

编辑：它的效率要低得多，请参阅>http://jsperf.com/js-array-vs-jquery-selector

您需要eq()函数：

for(var i = 0; i < foos.length; i++)
{
    foos.eq(i).html(bars.eq(i).html());
}

来自文档：

描述：将匹配元素集缩减为指定索引处的元素集。

BenM的回答直接回答了这个问题，但我想提供一个替代方案。

foos.html(function (i) {
   return bars.eq(i).html();
});

不确定它是否会更有效。

当然，可以缩短内部以提高效率，但我认为，除非你真的有性能问题需要解决，否则不应该使用微优化。

foos.html(function (i) {
   return bars[i].innerHTML;
});

当然，javascript版本总是比任何js库都快：

for(var i = 0; i < foos.length; i++){
  foos[i].innerHTML = bars[i].innerHTML;
}


foos = document.getElementsByClassName('foo');
bars = document.getElementsByClassName('bar');
for(var i = 0; i < foos.length; i++){
  foos[i].innerHTML = bars[i].innerHTML;
}
<div class="foo"></div>
<div class="foo"></div>
<div class="foo"></div>
<div class="bar">Hello World!1</div>
<div class="bar">Hello World!2</div>
<div class="bar">Hello World!3</div>

相关文章：