为什么用 .each() 遍历 jQuery 对象不会给我 jQuery 对象？

Question

以下按预期工作：

$(".foo").first().text("hi!")

...因为 first() 返回一个 jQuery 对象。

但是，如果我想对所有匹配项使用 text() 方法，我需要这样做：

$(".foo").each( function(idx, obj) {
  $(obj).text("hi!")
  }
)

...因为each() 为您提供 DOM 对象。

这种令人费解的差异背后的设计原因是什么？如何避免为每个匹配构建一个 jQuery 对象？

Answer 1

可能是由于与循环大型集合相关的性能原因？如果您只需要 DOM 对象，那么您可以节省周期。如果您需要 jQuery 对象，那么您可以轻松获得。

我通常不为每个参数提供第二个参数，所以我可以使用 $(this)。

Answer 2

在 jQuery 内部调用 $("sel").each(function(){});

if ( isObj ) {
    for ( name in object ) {
        if ( callback.call( object[ name ], name, object[ name ] ) === false ) {
            break;
        }
    }
}

eq 是一个简单的切片：

eq: function( i ) {
    return i === -1 ?
    this.slice( i ) :
    this.slice( i, +i + 1 );
}

因此您可以创建一个新的 each 函数，而不是 object[name] 将执行 object:eq(i)

$("*").slice(1,2).toSource() == $("*").eq(1).toSource();

所以要创建你自己的each：

$.fn.each2 = function(callback)
{
   for ( var i = 0; i < this.length; ++i ) {
      callback.call( this.eq(i), i, this.eq(i) )
   }
};

$("*").each2(function(i, obj) {
    alert(obj); // now obj is a jQuery object
});

---

看来each3比each2快http://www.jsfiddle.net/m7pKk/2/

$.fn.each2 = function(callback)
{
   for ( var i = 0; i < this.length; ++i ) {
       var jObj = this.eq(i);
      callback.call( jObj, i, jObj )
   }
};

$.fn.each3 = function(callback)
{
   for ( var i = 0; i < this.length; ++i ) {
       var jObj = $(this[i]);
      callback.call( jObj, i, jObj )
   }
};

See this example on jsFiddle with performance measurement.

Answer 3

每次迭代都会对性能造成明显影响。每次迭代创建一个新的 jQuery 对象会慢得多，并且在大型集合中可能会很明显。很多时候，您不需要包装对象的额外便利，尤其是在访问单个属性或属性时。您经常会看到像 $(this).is(":checked") 而不是 this.checked 这样的循环浪费代码。

不过，除此之外，我想说这是因为它有意义。一个 jQuery 对象通常表示一个 DOM 对象的集合，这些对象的大小可以是任意数量。有时 jQuery 纯粹是为了它的选择器支持和事件绑定而使用的，除此之外没有太多。在迭代更多元素的集合时，返回包含单个元素的集合没有多大意义。返回您更可能需要的单个项目（DOM 元素）更有意义，然后如果您想要添加的功能，可以使用 jQuery 包装它。这也使它与迭代 NodeList 和其他类型的集合保持一致。

Answer 4

我相信由于 jQuery 使用包装器对象，第一种方法使用原始包装器，并且只删除包装器中除第一个元素之外的所有元素，从而使其保持为 jQuery 对象。

但是，如果他们要为 each() 函数的每个节点提供一个 jQuery 对象，他们将产生为每个节点创建包装器的开销。而且由于您不一定需要该包装器对象，因此会产生不必要的开销。

Answer 5

可能是因为，在您的示例中，甚至没有理由使用 each。而不是：

$(".foo").each( function(idx, obj) {
  $(obj).text("hi!");
)

只需使用：

$(".foo").text("hi!");

在处理 jQuery 集合时，一切都自动复数。

Answer 6

你看到.each和jQuery.each了吗

您应该能够做到以下几点：

$('li').each(function(index) {
    alert(index + ': ' + $(this).text());
});

根据第一个链接。试试$(this) 而不是$(obj)

Answer 7

试试

$(".foo").each( function(idx, obj) {
  $(this).text("hi!")
  }
)