实施例

Question

jQuery集合是array-like Objects，其长度属性和方法来自Array.prototype，如splice, sort, and push。我知道这些方法不像典型的jQuery方法那样可链接，但方法确实可以正常工作。

是否有任何理由不使用Array.prototype方法来操纵jQuery集合，例如浏览器兼容性或其他jQuery方法的问题？

实施例

在循环中，将元素添加到jQuery集合中以供稍后操作。

var $divs = $(); // Create empty jQuery collection.
for (i = 0; i < 8; i++) {
  var div = document.createElement('div');
  div.innerHTML = i+1;
  $divs.push(div); // Add newly created div to collection
}
$divs.addClass('red').appendTo(document.body);

View on Codepen

在此使用push代替$divs = $divs.add(div);更简洁，效率更高。如果jsperf现在正在运作，我确信它会在push时表现出更好的效果。

Answer 1

以下是来自jQuery源代码的.add：

add: function( selector, context ) {
  return this.pushStack(
    jQuery.uniqueSort(
      jQuery.merge( this.get(), jQuery( selector, context ) )
    )
  );
},

在此功能中，还有3种方法被称为...... .merge，.uniqueSort（实际上是SizzleJS）和.pushStack ......

除了.push之外，jQuery还将：

如果是一个选择器数组，请合并您的输入。（.merge）
删除所有重复的条目。（.uniqueSort）
使用DOM元素（.pushStack）

因此，总结一下，如果你担心输入，.add很好用，因为jQuery使它变得灵活（常规DOM或jQuery对象可以工作），但是它也删除了重复的条目并且可以使用在带有数组的多个项目中。

Answer 2

您可以传递Array into jQuery，这意味着您可以充分利用原生数组

// build
var j, el, ly = [];
for (j = 0; j < 3; ++j) {
    el = document.createElement('span');
    ly.push(el);
}
// wrap
var jq = $(ly); // jQuery object [<span>, <span>, <span>]

可以使用pushStack和另一个数组

来添加更多元素

jq.pushStack([document.createElement('div')]);
jq; // [<span>, <span>, <span>, <div>]

或者更一般地使用add接受普通 jQuery 构造函数所需的任何输入

jq.add(document.createElement('hr'));
jq; //  [<span>, <span>, <span>, <div>, <hr>]

在jQuery集合上使用`push`

实施例

2 个答案: