【问题标题】：Merging jQuery objects合并 jQuery 对象
【发布时间】：2020-02-27 05:54:43
【问题描述】：

是否可以将多个 jQuery DOM 对象合并到一个数组中并在所有对象上调用 jQuery 方法？

F.ex:

<button>one</button>
<h3>two</h3>

<script>

var btn = $('button');
var h3 = $('h3');

$([btn,h3]).hide();

</script>

这不起作用。我知道我可以在这里使用 'button,h3' 选择器，但在某些情况下，我已经有几个 jQuery DOM 元素，我需要合并它们，以便我可以在所有这些元素上调用 jQuery 原型。

类似：

$.merge([btn,h3]).hide();

会起作用的。有什么想法吗？

更新：

解决了。你可以这样做：

$.fn.add.call(btn,h3);

我将接受add() 的建议，为我指明正确的方向。

【问题讨论】：

@David，为什么会奇怪地使用call？ btn.add(h3) 工作...
因为不知道第一个对象，所以不能链。 Apply() 会更好，所以我可以使用 $.fn.add.apply(arr.shift(),arr); 发送一个数组；
有没有办法添加两个以上的对象？
如果你不知道第一个对象，你可以通过链接一个空的jQuery对象来避免使用call：$().add(btn).add(h3)。 IMO，这是使用$.add 的更好方法。
这基本上是stackoverflow.com/questions/323955/…的副本

标签： jquery

【解决方案1】：

.add() 完全符合您的要求。

h3.add(btn).hide();

如果您想让自己更方便一点，可以使用问题中的“合并”功能，可以轻松添加：

$.merge = function(objs) {
    var ret = objs.shift();
    while (objs.length) {
        ret.add(objs.shift());
    }
    return ret;
};

$.merge([h3, btn]).hide()

【讨论】：

JQuery 现在有一个合并功能，所以应该使用 $.merge 以外的东西。
如果我没记错的话，jQuery.Add 方法会生成一个新的jQuery 对象，而不是修改调用该方法的原始对象。不是ret = ret.Add(objs.shift());吗？

【解决方案2】：

$.map 可以展平数组：

function merge(array_of_jquery_objects) {
    return $($.map(array_of_jquery_objects, function(el) {
        return el.get();
    }));
}

【讨论】：

当您遇到旧的 jQuery 版本 (

【解决方案3】：

$(btn).add(h3).hide();

不确定它是否有效，documentation for add 没有提到将 jQuery 对象作为参数，而只是一个元素列表，所以如果这不起作用，应该这样做：

$(btn).add(h3.get()).hide();

【讨论】：

不确定哪个版本在 2009 年有效，但 1.3.2 添加了 add(selector : jQuery) 重载。

【解决方案4】：

获取一些 jQuery 对象：

var x = $('script'),
    y = $('b'),
    z = $('body');

创建一个新的 jQuery 对象，包含所有其他对象：

$( $.map([x,y,z], a => [...a]) )

演示：（打开浏览器的控制台）

var x = $('script'),
    y = $('b'),
    z = $('body');

// step 1
// put all the jQuery objects in an Array to prepare for step 2
var step1 = [x,y,z];
console.log(step1)

// using jQuery.map and a callback, extract  the actual selector from the iterable 
// array item and return it, so the result would be a simple array of DOM nodes
// http://jqapi.com/#p=jQuery.map
var step2 = $.map(step1, a => [...$.makeArray(a)])
console.log(step2);

// convert the javascript Array into jQuery Object (which contains all the nodes)
var step3 = $( step2 )
console.log(step3);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<b></b>

【讨论】：

您能补充一下您的解决方案吗？

【解决方案5】：

使用这个。

<script>

var btn = $('button')[0];
var h3 = $('h3')[0];

$([btn,h3]).hide();

</script>

【讨论】：

这只会合并每个集合中的第一个元素，因此它远非最佳答案。只有在非常特殊的情况下才好。

【解决方案6】：

要更进一步地使用add，您可以将reduce 与它一起用于另一种方法：

var $mySelector1 = $('.selector1');
var $mySelector2 = $('.selector2');
var $mySelector3 = $('.selector3');
var selectorArray = [$mySelector1,$mySelector2,$mySelector3];
var $combinedSelector = selectorArray.reduce(function(total, current){
    return $(total).add(current)
});

【讨论】：