How to group jquery objects to apply css together?

Question

Say I have a function that accepts multiple jQuery objects:

workWithThreeObjs($('.content'),
                  $('h1'),
                  $('input[type=button]'));

I define my function like this:

function workWithThreeObjs(p, h1, buttons) {
    ...
}

Inside this function, I want to apply border to all of them like this

$(p, h1, buttons).css(...);

How do I do that? Right now it only applies to p.

My function code does not control what is passed into it, so I cannot change the selectors used to create the arguments. I must operate only on the jQuery objects provided.

Google has only shown me duplicates which are different so not a duplicates. They talk about grouping selectors not objects. — Muhammad Umer, Jun 03 '15 at 18:38
@MuhammadUmer It **is** a duplicate, I've seen it many times, but "add" is such a common term it's hard to find on SO... — Denys Séguret, Jun 03 '15 at 18:42
i agree with you @DenysSéguret . i have seen it many times too. — Muhammad Umer, Jun 03 '15 at 18:44
@DavidThomas http://jsfiddle.net/ddxhw21b/1/see for yourself — Muhammad Umer, Jun 03 '15 at 18:44
I stand corrected; I'm a little surprised by that (though I'm not sure why). — David Thomas, Jun 03 '15 at 18:47
Or, possibly an even better option: [How to combine two jQuery results](http://stackoverflow.com/questions/323955/how-to-combine-two-jquery-results) — apsillers, Jun 03 '15 at 18:58
@apsillers agree with the second option - have voted to close the first as a duplicate of the second — CupawnTae, Jun 03 '15 at 20:46

Satpal · Accepted Answer · 2015-06-03T18:46:42.967

10

Assuming that you want to use variables

Use $.fn.add()

Create a new jQuery object with elements added to the set of matched elements.

var p = $('.content'),
    h1 = $('h1'),
    buttons = $('input[type=button]');

p.add(h1).add(buttons).css({})

DEMO

edited Jun 03 '15 at 18:46

answered Jun 03 '15 at 18:39

Satpal

132,252
13
159
168

1

not sure why the discussion is continuing elsewhere, this is the answer. At least until someone finds the right duplicate to mark it with – CupawnTae Jun 03 '15 at 18:49

leapin_leprechaun · Answer 2 · 2015-06-03T18:52:10.327

2

var p = $('.content'),
        h1 = $('h1'),
        buttons = $('input[type=button]');

function workAnyNumberofObjects() {
  for(var i=0; i<arguments.length; i++){
    arguments[i].css('border', '1px solid blue')
  }
}

workAnyNumberofObjects(p,h1,buttons);

You should be able to use any number of selectors here

edited Jun 03 '15 at 18:52

answered Jun 03 '15 at 18:39

leapin_leprechaun

605
1
4
15

yes but i already have selectors deep in code, and they are specific based on some alogrithim. This example was meant to show what i wanted to do not how my code is. – Muhammad Umer Jun 03 '15 at 18:40
1

Then give a better example of what you're doing to show your problem. – David Thomas Jun 03 '15 at 18:41

How to group jquery objects to apply css together?

2 Answers2