Question

我有两个长度相等的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对象的方法吗？

编辑：效率低得多，请参阅＆gt; http://jsperf.com/js-array-vs-jquery-selector

Answer 1

您需要eq()功能：

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

来自文档：

描述：将匹配元素集合减少到指定索引处的元素。

Answer 2

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

＆＃13;

foos = document.getElementsByClassName('foo');
bars = document.getElementsByClassName('bar');

for(var i = 0; i < foos.length; i++){
  foos[i].innerHTML = bars[i].innerHTML;
}

＆＃13;

<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>

＆＃13;

同时循环遍历两个jQuery对象

2 个答案: