如何构建包含指定元素的自定义jQuery对象？

我来帮你搞定这个问题～你遇到的核心问题是，之前用$([ele1, ele2])创建的并不是标准的jQuery元素集合，而是一个包裹了两个jQuery对象的特殊集合，所以链式调用才会出问题。下面给你几种靠谱的解决方法：

方法1：用add()方法逐步构建集合 #

这是最直观的方式，先创建一个空的jQuery对象，然后把你需要的元素逐个加进去：

function getSelection() {
  var ele1 = $('<p></p>').appendTo('body');
  var ele2 = $('<p></p>').prependTo('html');
  // 空jQuery对象 + 依次添加元素
  return $().add(ele1).add(ele2);
}

这样返回的就是标准的jQuery集合，直接支持你想要的链式操作：

console.log('font', getSelection().first().css('font-family'));

方法2：直接传入DOM元素数组 #

jQuery的构造函数可以接收DOM元素组成的数组，所以你只需要把每个jQuery对象对应的DOM元素取出来再传入就行：

function getSelection() {
  var ele1 = $('<p></p>').appendTo('body');
  var ele2 = $('<p></p>').prependTo('html');
  // 提取DOM元素组成数组，传入$()创建标准集合
  return $( [ele1[0], ele2[0]] );
}

这种方式创建的集合同样能无缝支持所有jQuery链式方法。

方法3：用$.merge()合并元素集合 #

jQuery提供了$.merge()方法可以合并两个jQuery对象的元素列表，返回合并后的DOM元素数组，再把这个数组传给$()就能得到标准集合：

function getSelection() {
  var ele1 = $('<p></p>').appendTo('body');
  var ele2 = $('<p></p>').prependTo('html');
  // 合并两个jQuery对象的元素，转为新的jQuery集合
  return $( $.merge(ele1, ele2) );
}

为什么原来的写法失效？ #

你之前写的$([ele1, ele2])，数组里装的是两个jQuery对象，而不是原生DOM元素。jQuery会把这两个jQuery对象当成普通JS对象来包裹，所以你的集合里的每一项都是jQuery对象，而非DOM节点。这就导致调用.first()后拿到的是包含ele1的项，必须再取[0]才能拿到真正可调用方法的jQuery对象。

内容的提问来源于stack exchange，提问作者sazr