How to addClass or set multiple CSS properties to multiple elements which has variables?

Question

How can I addClass or add css properties to multiple elements(id's) which has variables assigned to them. The code works if I use directly $('#cc, #dd').addClass('blue') but doesn't work if it has variables assigned to id's like $(cc, dd).addClass('blue'). Please check the below code, the commented line works but not if it has variables.

$(document).ready(function() {
    var cc = $("#cc"),
        dd = $("#dd");
    $("button").click(function() {
        // $("#cc, #dd").addClass("blue");
        $(cc, dd).addClass("blue");
        $(cc, dd).css({
            "color": "#2196f3",
            "font-size": "30px"
        });
        $("h1, h2, p").addClass("blue");
    });
});

.blue {
  color: #2196f3;
  font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
   
<div id="cc">hello 1</div>
<div id="dd">hello 2</div>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>

<button>Add classes to elements</button>

try cc.addClass('blue');

Swapnil Patil
– Swapnil Patil

2017-04-26 04:34:51 +00:00
Commented Apr 26, 2017 at 4:34 — Swapnil Patil
– Swapnil Patil, Commented Apr 26, 2017 at 4:34
You can add a common class for cc and dd

athi
– athi

2017-04-26 04:37:29 +00:00
Commented Apr 26, 2017 at 4:37 — athi
– athi, Commented Apr 26, 2017 at 4:37
Possible duplicate of How to combine two jQuery results

t.niese
– t.niese

2017-04-26 04:51:38 +00:00
Commented Apr 26, 2017 at 4:51 — t.niese
– t.niese, Commented Apr 26, 2017 at 4:51

madalinivascu · Accepted Answer · 2017-04-26 04:46:37Z

3

Use add() to add the dd element to the cc collection, right now you are trying to find a cc element inside the dd element see selector context

var cc = $("#cc"),
    dd = $("#dd");
$(cc).add(dd).addClass("blue");

.blue {
  background:blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="cc"></button>
<button id="dd"></button>

edited Apr 26, 2017 at 4:46

answered Apr 26, 2017 at 4:37

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

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

1 Comment

jake Over a year ago

Thanks a lot, Works perfectly!

Minal Chauhan · Accepted Answer · 2017-04-26 04:45:53Z

0

$(document).ready(function() {
  var cc = $("#cc"),
      dd = $("#dd");
  $("button").click(function() {
      // $("#cc, #dd").addClass("blue");
      dd.addClass("blue");
      cc.addClass("blue");
      $(cc, dd).css({
          "color": "#2196f3",
          "font-size": "30px"
      });
      //$("h1, h2, p").addClass("blue");
  });
});

.blue {
    color: #2196f3;
    font-size: 30px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
  
<div id="cc">hello 1</div>
<div id="dd">hello 2</div>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<p>This is a paragraph.</p>

<button>Add classes to elements</button>

edited Apr 26, 2017 at 4:45

Minal Chauhan

6,16812 gold badges24 silver badges41 bronze badges

answered Apr 26, 2017 at 4:38

Swapnil Patil

9621 gold badge8 silver badges15 bronze badges

Comments

Jon P · Accepted Answer · 2017-04-26 04:45:58Z

0

You could use an array and join:

var arrSelectors = ["#cc", "#dd", ".someOtherSelector"];

$(arrSelectors.join).addClass("blue");

edited Apr 26, 2017 at 4:45

answered Apr 26, 2017 at 4:40

Jon P

19.9k8 gold badges52 silver badges76 bronze badges

2 Comments

madalinivascu Over a year ago

they are not strings they are jquery objects so this should not work

Jon P Over a year ago

@madalinivascu correct, not enough coffee in the system... revising my answer to an alternate approach.

Collectives™ on Stack Overflow

How to addClass or set multiple CSS properties to multiple elements which has variables?

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related