Merging jQuery objects

Question

Is it possible to merge several jQuery DOM objects into one array and call jQuery methods on all of them?

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.

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.

@David, why the bizarre use of call? btn.add(h3) works... — nickf
– nickf, Commented Dec 10, 2009 at 15:53
Because I do not know the first object, so I can't chain. Apply() would be even better, so I can send an array using $.fn.add.apply(arr.shift(),arr); — David Hellsing
– David Hellsing, Commented Dec 10, 2009 at 16:21
If you don't know the first object, you can avoid using call by chaining off an empty jQuery object: $().add(btn).add(h3). IMO, this is a much better way to use $.add. — Matt Ball
– Matt Ball, Commented Aug 19, 2010 at 18:58
is this basically a duplicate of stackoverflow.com/questions/323955/… — jrz
– jrz, Commented Aug 28, 2014 at 21:43

Alois Christen · Accepted Answer · 2022-11-05 19:42:48Z

34

.add() does exactly what you're after.

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 = ret.add(objs.shift());
    }
    return ret;
};

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

edited Nov 5, 2022 at 19:42

Alois Christen

5454 silver badges18 bronze badges

answered Dec 10, 2009 at 15:40

nickf

548k199 gold badges660 silver badges727 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Tom Hubbard Over a year ago

JQuery now has a merge function so something other than $.merge should be used.

Oybek Over a year ago

If I'm not mistaken, jQuery.Add method causes a new jQuery object to be produced instead of modifying the original object on which the method is called. Isn't it ret = ret.Add(objs.shift());?

Tgr · Accepted Answer · 2011-05-19 14:26:21Z

8

$.map can flatten arrays:

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

answered May 19, 2011 at 14:26

Tgr

28.4k13 gold badges88 silver badges123 bronze badges

1 Comment

sierrasdetandil Over a year ago

Useful when you're stuck with an old jQuery version (< 1.3.2).

TWiStErRob · Accepted Answer · 2016-02-25 12:48:36Z

6

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

Not sure if it works though, documentation for 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:

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

edited Feb 25, 2016 at 12:48

TWiStErRob

46.8k29 gold badges183 silver badges278 bronze badges

answered Dec 10, 2009 at 15:31

Svante Svenson

12.5k4 gold badges44 silver badges46 bronze badges

1 Comment

TWiStErRob Over a year ago

Not sure which version was active in 2009, but 1.3.2 added the add(selector : jQuery) overload.

vsync · Accepted Answer · 2018-10-28 19:46:45Z

3

Get some jQuery objects:

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

Create a new jQuery object, containing all the other objects:

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

edited Oct 28, 2018 at 19:46

answered Oct 24, 2016 at 16:33

vsync

133k60 gold badges345 silver badges430 bronze badges

1 Comment

terales Over a year ago

Can you add an explanation about your solutions, please?

samnau · Accepted Answer · 2020-02-26 21:54:43Z

2

To take the use of add a little farther, you could use reduce with it for another approach:

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)
});

answered Feb 26, 2020 at 21:54

samnau

7528 silver badges9 bronze badges

Comments

Lakin Mohapatra · Accepted Answer · 2015-06-25 13:19:53Z

1

Use this one.

<script>

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

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

</script>

answered Jun 25, 2015 at 13:19

Lakin Mohapatra

1,13511 silver badges22 bronze badges

1 Comment

vsync Over a year ago

This will only merge the very first element in each set, therefor it is far from an optimal answer. only good in very specific cases.

Collectives™ on Stack Overflow

Merging jQuery objects

6 Answers 6

2 Comments

1 Comment

1 Comment

Get some jQuery objects:

Create a new jQuery object, containing all the other objects:

Demo: (open your browser's console)

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

1 Comment

1 Comment

Get some jQuery objects:

Create a new jQuery object, containing all the other objects:

Demo: (open your browser's console)

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related