合并 jQuery 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1881716/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Merging jQuery objects
提问by David Hellsing
Is it possible to merge several jQuery DOM objects into one array and call jQuery methods on all of them?
是否可以将多个 jQuery DOM 对象合并到一个数组中并在所有对象上调用 jQuery 方法？
F.ex:
例子：
<button>one</button>
<h3>two</h3>
<script>
var btn = $('button');
var h3 = $('h3');
$([btn,h3]).hide();
</script>
This doesn't work. I know I can use the 'button,h3' selector here but in some cases I already have several jQuery DOM elements and I need to merge them so I can call jQuery prototypes on all of them.
这不起作用。我知道我可以在这里使用 'button,h3' 选择器，但在某些情况下，我已经有几个 jQuery DOM 元素，我需要合并它们，以便我可以在所有元素上调用 jQuery 原型。
something like:
就像是：
$.merge([btn,h3]).hide();
would work. Any ideas?
会工作。有任何想法吗？
UPDATE:
更新：
Solved it. You can do it like this:
解决了。你可以这样做：
$.fn.add.call(btn,h3);
I'm going to accept the add()suggestion as for pointing me in the right direction.
我将接受add()为我指明正确方向的建议。
回答by nickf
.add()does exactly what you're after.
.add()正是你所追求的。
h3.add(btn).hide();
If you wanted to make it a little more convenient for yourself, with a "merge" function like in your question, this could be added easily:
如果您想让自己更方便一些，使用您的问题中的“合并”功能，可以轻松添加：
$.merge = function(objs) {
var ret = objs.shift();
while (objs.length) {
ret.add(objs.shift());
}
return ret;
};
$.merge([h3, btn]).hide()
回答by Tgr
$.mapcan flatten arrays:
$.map可以展平数组：
function merge(array_of_jquery_objects) {
return $($.map(array_of_jquery_objects, function(el) {
return el.get();
}));
}
回答by svinto
$(btn).add(h3).hide();
Not sure if it works though, documentationfor add doesn't mention haivng the jQuery object as a parameter but only a list of elements, so if that doesn't work this should:
不确定它是否有效，add 的文档没有提到将 jQuery 对象作为参数，而只是一个元素列表，所以如果这不起作用，这应该：
$(btn).add(h3.get()).hide();
回答by vsync
Get some jQuery objects:
获取一些 jQuery 对象：
var x = $('script'),
y = $('b'),
z = $('body');
Create a new jQuery object, containing all the other objects:
创建一个新的 jQuery 对象，包含所有其他对象：
$( $.map([x,y,z], a => [...a]) )
Demo: (open your browser's console)
演示：（打开浏览器的控制台）
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>回答by Lakin Mohapatra
Use this one.
用这个。
<script>
var btn = $('button')[0];
var h3 = $('h3')[0];
$([btn,h3]).hide();
</script>回答by samnau
To take the use of adda little farther, you could use reducewith it for another approach:
为了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)
});
