jquery - add class to existing div with multiple classes

Question

I'm trying to add a class to an existing div that has multiple classes but doesn't work, the class is not added. I've added this on header (it's s shopify template):

<script type="text/javascript">
 jQuery(document).ready(function($) {
$('div.wk_right_header_inner wk_font_weight_bold wk_font_family wk_paddingbottom10').addClass('new-class');
 });
 </script>

The div looks like this (with no space after <):

<div class="wk_right_header_inner wk_font_weight_bold wk_font_family  
 wk_paddingbottom10"> Test </div>

Thanks

your selector syntax is wrong. And there's no need to use all the classes $('div.wk_right_header_inner').addClass('new-class'); }); is quite enough. — vivekkupadhyay
– vivekkupadhyay, Commented Sep 19, 2015 at 12:28
Yes, just pick one class name and addClass to that. Like: $('div .wk_right_header_inner').addClass('new-class'); — divy3993
– divy3993, Commented Sep 19, 2015 at 12:29
Wouldn't it be easier to give it an ID and use $('#id').addClass('new-class')? — Ben Kolya Mansley
– Ben Kolya Mansley, Commented Sep 19, 2015 at 12:30

Niki van Stein · Accepted Answer · 2015-09-19 12:28:45Z

2

You need to do

$('div.wk_right_header_inner.wk_font_weight_bold.wk_font_family.wk_paddingbottom10').addClass('new-class');
 });

Because now it thinks the other classes are sub elements.

answered Sep 19, 2015 at 12:28

Niki van Stein

10.8k3 gold badges33 silver badges63 bronze badges

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

Comments

divy3993 · Accepted Answer · 2015-09-19 12:34:10Z

1

Have a look a this:

 jQuery(document).ready(function($) {
$(' .wk_right_header_inner ').addClass('new-class');
 });

.new-class
{
  color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wk_right_header_inner wk_font_weight_bold wk_font_family wk_paddingbottom10"> Test </div>

answered Sep 19, 2015 at 12:34

divy3993

5,8202 gold badges30 silver badges44 bronze badges

1 Comment

divy3993 Over a year ago

@johnstoe Glad that it helped you!

Collectives™ on Stack Overflow

jquery - add class to existing div with multiple classes

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related