69

I would like to add a class (class="bbox") to a ul-list but only if no class exists. This is what I have so far. How do I check with jQuery if a class exists in the ul-tag?

$("ul").addClass("bbox");
Muhammad Dyas Yaskur
  • 6,914
  • 10
  • 48
  • 73
Mark Henry
  • 2,649
  • 7
  • 40
  • 48
  • 22
    There is no need to check if the class has already been added; `.addClass` will perform a `.hasClass` check internally. See: http://stackoverflow.com/questions/13358887 – Metro Smurf Jul 03 '15 at 18:18

8 Answers8

80

Just use $('.selector').addClass("myClass");.

The jQuery add/remove class functions both check for duplicates internally, meaning that calling addClass twice only will add the class once.

Tormod Haugene
  • 3,538
  • 2
  • 29
  • 47
  • 6
    from jQuery documents : https://api.jquery.com/addclass/ It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements. – vanduc1102 Mar 19 '17 at 05:20
  • 6
    @vanduc1102 If you mean that jQuery will duplicate class, you misunderstood the docs. The statement means that it does not replace all `class` attribute value. jQuery really checks for duplicity, and it was already covered by many QA here in SO. – Andre Figueiredo Oct 14 '19 at 15:08
60

If you want to check if a specific class exists then:

 if(!$("ul").hasClass("class-name")){
    $("ul").addClass("bbox");
 }

If you want to check if any class exists:

if ($('ul').attr('class') == '') {
    $("ul").addClass("bbox");
}
Matt Asbury
  • 5,644
  • 2
  • 21
  • 29
  • I tried to select the first ul within #content but it selects all. what is wrong? if($('#content ul:nth-child(1)').hasClass("bbox") == false){ $("ul").addClass("bbox"); } – Mark Henry Nov 25 '11 at 09:20
  • 3
    `hasClass()` already returns true or false so the check if equal to false is redundant. `if(!$('ul').hasClass('classname'))` would suffice – Andy Nov 25 '11 at 10:33
  • 7
    Regarding the specific classes thing, as of now jQuery already checks for the class before adding it with addClass – Brad Decker Aug 12 '15 at 14:52
25

karim79 you almost got it !

let me correct you

$("ul:not([class*='bbox'])").addClass("bbox");

You match the tag with absolute no classes, and if ul had other classes the matching wouldn't be made. You got to search for the exactly class you wish to add. Like .hasClass aproach.

hope it helps

aemonge
  • 2,289
  • 1
  • 24
  • 26
  • 2
    If I'm not mistaken, you forgot brackets around the attribute selector. Also, `$("ul:not([class~='bbox'])").addClass("bbox");` would be better (tilde). – Bart Jun 04 '13 at 10:07
15

I was wondering this would work fine -->

$("ul").removeClass("bbox").addClass("bbox");

First it will remove if there is any and then add new one . Worked best for me as i am too lazy to type all that if thingy.

Vishal Nair
  • 2,141
  • 3
  • 26
  • 39
5

If I'm toggling between 2 classes I use this method

if (foo)
    $('button.btn-foo').removeClass('foo bar').addClass('foo');
if (bar)
    $('button.btn-foo').removeClass('foo bar').addClass('bar');

So I don't have to check the current setting of the button

Danial
  • 1,496
  • 14
  • 15
4

you can use this code for adding class only when if not exist

$('.your-dom:not(.class-name)').addClass('class-name');
Mahmoud
  • 868
  • 11
  • 27
2

Concisely:

// fine, because nothing happens if 
// there are no matching elements
$("ul[class='']").addClass("bbox");
karim79
  • 339,989
  • 67
  • 413
  • 406
  • 1
    Won't work if it has class abox and you're trying to add bbox. Matt's solution is solves this problem. – Zippo Aug 24 '12 at 12:36
0

To add a class (class="bbox") to a ul-list only if no class exists:

if (!$('ul').attr('class') == '') {
    $("ul").addClass("bbox");
}
Pranjalee R
  • 11
  • 1
  • 3