0

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.

Improve this question
10
  • Couldn't you just try what you posted to see if it works? Commented Mar 27, 2015 at 15:58
  • And what did you just do? Commented Mar 27, 2015 at 15:59
  • @user511287 you might be also interested in the jQuery's .add() method. Take a look at the DOCS Commented Mar 27, 2015 at 16:01
  • @RokoC.Buljan: No, what the OP listed doesn't work. Commented Mar 27, 2015 at 16:03
  • 1
    @RokoC.Buljan: Ah, yes, sorry -- but in a very limited context (jQuery objects containing one object), and the top-voted answer relies on that. There is an answer, futher down, which discusses .add, though. (Not the other options available.) Commented Mar 27, 2015 at 16:31

3 Answers 3

Reset to default
2

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.

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

9 Comments

Doesn't jQuery also take $([a, b, c])?
@user2864740: No. It will take an array, but if you give it an array of jQuery objects you don't get what you want. If a, b, and c were just DOM elements, that would work.
Wouldn't making $(a, b, c).attr({... work be a useful and good addition to jQuery?
stackoverflow.com/questions/3966678/…
@RokoC.Buljan: Not really identical, see my note here. But yes, very similar.
|
0

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

Improve this answer

3 Comments

Could you also explain your solution?
@magnilex check out: api.jquery.com/each
It is not for me. Short answers, like this one, automatically goes into a review queue for "low quality posts". I am not saying your answer is of low quality, but it will get better if you explain the solution.
0

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>

Improve this answer

5 Comments

thanks also works often, but that relies on a, b, c originating from simple selectors which can be easily repeated all over the place, which isn't necessarily true
Not certain if interpret "but that relies on a, b, c originating from simple selectors which can be easily repeated all over the place, which isn't necessarily true " ? correctly ? Would a, b, c be cached selectors ?
@guest271314: No, they'd be what the question says they are: jQuery objects.
@guest271314 a,b,c are just jQuery objects, you don't know where they come from (not necessariy from single DOM elements with ids a, b, c) therefore $("#a, #b, #c") generally doesn't work
@guest271314 works too, but not as simple as the proposals above

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.