Select multiple jQuery objects with .add()

Question

Does the .add() method allow selecting multiple objects in one go instead of adding one at a time?

one.add(two).add(three).add(four).on("click", function() { });

The following variables are set in the way they do because each carries a different function.

var one   = $("#1");
var two   = $("#2");
var three = $("#3");
var four  = $("#4");

But what if I want to add an extra function that applies to all of these elements? Do I have to add them one by one?

I know you can select them all using $("#1,#2,#3,#4"), but I just want to make use of the above variables.

BTW: A number as first character for ID-declaration is never a good idea... ;-) — yckart
– yckart, Commented Jan 31, 2013 at 16:40
@yckart They are never named that way. This is for the purpose of illustration only. — Antony
– Antony, Commented Jan 31, 2013 at 16:57

Reinstate Monica Cellio · Accepted Answer · 2013-01-31 13:55:39Z

38

I'd prefer this array approach, purely for readability...

$([one, two, three, four]).each(function() {
    // your function here
});

answered Jan 31, 2013 at 13:55

Reinstate Monica Cellio

26.2k6 gold badges54 silver badges67 bronze badges

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

Comments

Jay Blanchard · Accepted Answer · 2017-07-19 15:48:56Z

11

You cannot add multiple objects in one go, for example:

var groupThree = one.add(three, five); // will not work as expected

You could cache the added objects so that you only have to do the add one time - http://jsfiddle.net/X5432/

var one   = $("#1");
var two   = $("#2");
var three = $("#3");
var four  = $("#4");
var five  = $("#5");

var groupOne = one.add(two).add(three).add(four);
var groupTwo = groupOne.add(five);

$('#first').click(function(e){
    e.preventDefault();
    groupOne.css({'background': '#00FF00'});
});

$('#second').click(function(e){
    e.preventDefault();
    groupTwo.css({'background': '#FF0000'});
});

But I like the array method better, this is just a different way of thinking about it.

edited Jul 19, 2017 at 15:48

answered Jan 31, 2013 at 14:09

Jay Blanchard

34.5k17 gold badges82 silver badges130 bronze badges

1 Comment

Werner Over a year ago

This is nice, you might get even more benefit from the approach by using it like: groupOne.click(function(e){});

Anton · Accepted Answer · 2013-01-31 13:56:09Z

5

You could put them into an array like this

var k = [one,two,three,four]

$.each(k,function(){
  $(this).click(function(){
     //Function here
   });
});

answered Jan 31, 2013 at 13:56

Anton

32.6k5 gold badges47 silver badges54 bronze badges

1 Comment

Derek 朕會功夫 Over a year ago

Or just do this: $(k).click(function(){...})

Collectives™ on Stack Overflow

Select multiple jQuery objects with .add()

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related