71

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");
Improve this question
1

8 Answers 8

Reset to default
83

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.

Improve this answer
2
  • 7
    from jQuery documents : 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
    Commented Mar 19, 2017 at 5:20
  • 7
    @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
    Commented Oct 14, 2019 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");
}
Improve this answer
3
  • 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
    Commented Nov 25, 2011 at 9:20
  • 3
    hasClass() already returns true or false so the check if equal to false is redundant. if(!$('ul').hasClass('classname')) would suffice
    – Andy
    Commented Nov 25, 2011 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
    Commented Aug 12, 2015 at 14:52
26

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

Improve this answer
1
  • 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
    Commented Jun 4, 2013 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.

Improve this answer
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

Improve this answer
4

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

$('.your-dom:not(.class-name)').addClass('class-name');
Improve this answer
2

Concisely:

// fine, because nothing happens if 
// there are no matching elements
$("ul[class='']").addClass("bbox");
Improve this answer
1
  • 1
    Won't work if it has class abox and you're trying to add bbox. Matt's solution is solves this problem.
    – Zippo
    Commented Aug 24, 2012 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");
}
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.