合并jQuery对象

时间:2009-12-10 15:24:11

标签: jquery

是否可以将多个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()建议,指出我正确的方向。

6 个答案:

答案 0 :(得分:19)

.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()

答案 1 :(得分:8)

$.map可以展平数组:

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

答案 2 :(得分:5)

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

不确定它是否有效,documentation对于add没有提及将jQuery对象作为参数而只是一个元素列表,所以如果这不起作用,则应该:

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

答案 3 :(得分:3)

获取一些jQuery对象:

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

创建一个新的jQuery对象,包含所有其他对象:

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

演示:(打开浏览器的控制台)

&#13;
&#13;
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);
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<b></b>
&#13;
&#13;
&#13;

答案 4 :(得分:2)

使用这个。

&#13;
&#13;
<script>

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

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

</script>
&#13;
&#13;
&#13;

答案 5 :(得分:0)

要进一步使用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)
});