How do I call a jQuery function on several jQuery objects?

Question

Imagine you have the following three jQuery objects a, b, c, how would you for example set identical attributes on all of them without repeating too much code as I'm currently doing:

a.attr({
    "first":  "sameFirst",
    "second": "sameSecond",
    "third":  "sameThird",
});
b.attr({
    "first":  "sameFirst",
    "second": "sameSecond",
    "third":  "sameThird",
});
c.attr({
    "first":  "sameFirst",
    "second": "sameSecond",
    "third":  "sameThird",
});

Isn't there something like:

$(a, b, c).attr({
    "first":  "sameFirst",
    "second": "sameSecond",
    "third":  "sameThird",
});

?

EDIT : Now that I learned I can either use .add() or $() with an array of non-jQuery objects, I wonder why $(a, b, c) isn't supported because the other solutions to me seem unnecessarily verbose or convoluted.

Answer 1

Isn't there something like:

$(a, b, c).attr({ ...

No, but you have two similar choices:

• .add (this is probably the simplest and clearest)

• $() on an array of elements

Here's add :

 var a = $("#a"), b = $("#b"), c = $("#c"); a.add(b).add(c).css("color", "green"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> 

Here's $() on an array of elements:

 var a = $("#a"), b = $("#b"), c = $("#c"); $(a.get().concat(b.get()).concat(c.get())).css("color", "green"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> 

Or if you know there's only one element in each jQuery object, then it's a bit simpler:

 var a = $("#a"), b = $("#b"), c = $("#c"); $([a[0], b[0], c[0]]).css("color", "green"); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> 

---

I wonder why $(a, b, c).foo() isn't supported because the other solutions to me seem unnecessarily verbose or convoluted.

The $() function is already ridiculously overloaded ( see docs ), my guess is that's the only reason this hasn't been added at some point. It's also surprising how rarely this comes up.

Answer 2

$.each([a,b,c], function (index, item) {// do stuff here with item});

Answer 3

Try

 var a = $("#a"), b = $("#b"), c = $("#c"); var attrs = { "first": "sameFirst", "second": "sameSecond", "third": "sameThird", }; $([]).pushStack([a[0], b[0], c[0]]).attr(attrs) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div> 

---

alternatively

 var a = $("#a"), b = $("#b"), c = $("#c"); var attrs = { "first": "sameFirst", "second": "sameSecond", "third": "sameThird", }; $([a, b, c]).map(function() { $(this).attr(attrs); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div id="a">a</div> <div id="b">b</div> <div id="c">c</div>