Neater way of checking adding/removing a CSS class using 'hasClass' in jQuery?

Question

Overview

From time to time in jQuery I want to check a condition of some kind, and then based on the result add/remove a cssClass to an element.

Before calling add(remove)Class, I always check to see if that class isn't (or is) applied already.

In code, this translates to

var myElement = $('#something'),
    someClass = 'coolClass';

if (someCondition) {

   // addClass, but only if that class isn't already on this element
   if (!myElement.hasClass(someClass)) { myElement.addClass(someClass); }

} else {

   // otherwise, removeClass, but only if it's already on this element
   if (myElement.hasClass(someClass)) { myElement.removeClass(someClass); }

}

Is there a neater way of writing the above?

I'm sure there must be a nicer way of doing this, as the nested if statements smell to me.

Clarity on toggling

Just a clarifying note (added after the answers below). It is important to note here than toggleClass(className) will not suffice as I explicitally want to remove or add based on a condition check - and need to account for the 'toggle' going out of sync. (Adam gives an example in a comment on Rob's answer below).

The same thing without jQuery: [Add or remove a class based on a condition](/q/69641793/4642212). — Sebastian Simon, Oct 20 '21 at 07:28

Adam Terlson · Accepted Answer · 2011-12-23T18:49:23.437

7

var myElement = $('#something'),
someClass = 'coolClass';
myElement.toggleClass(someClass, someCondition);

toggleClass does your check for you essentially. If you do a toggleClass('class', true) it'll only actually put that class on there if it's not already, and will never add more than one class of the same name.

edited Dec 23 '11 at 18:49

answered Dec 23 '11 at 18:36

Adam Terlson

12,610
4
42
63

@Adam - perfect, I was obviously aware of `toggleClass` but never knew of the `switch` argument added in 1.3. I didn't want a simple toggle as (as pritaeas says) the condition is the thing I'm getting at here – isNaN1247 Dec 23 '11 at 18:42
@beardtwizzle Great! Glad I was able to answer your question for you! – Adam Terlson Dec 23 '11 at 18:45
@AdamTerlson when I used this, I found that `addClass` or `removeClass` was still being called every time `toggleClass` was called. – ehdv Jun 20 '13 at 02:30

Rob W · Answer 2 · 2011-12-23T18:41:33.250

6

Use the toggleClass method, which removes a class if it exists, and adds it if it does not.

var myElement = $('#something'),
    someClass = 'coolClass';

myElement.toggleClass(someClass, someCondition);

Reviewing your current code, I add that there's no need to use hasClass. jQuery automatically deals correctly with the request: A class name is only added once, so using $("<a>").addClass("xxx").addClass("xxx").attr("class") will return x, instead of xxx xxx.

edited Dec 23 '11 at 18:41

answered Dec 23 '11 at 18:36

Rob W

341,306
83
791
678

Bah! You beat me by 16 seconds. :( However, you forgot `condition`. – Adam Terlson Dec 23 '11 at 18:36
1

@AdamTerlson: You don't need a condition, the OP just wants to toggle the classname from the element. – Purag Dec 23 '11 at 18:38
@Purmou Sounded to me like he wanted to toggle something based on a condition. `If (condition) addClass, Else removeClass`. That's toggling based on a condition, not just a toggle. Consider calling his code twice with condition being true each time. That'll leave the classes unchanged. In RobW's code, it'll be removed on the second call. – Adam Terlson Dec 23 '11 at 18:42
@Rob W - Yes Adam is right, I apologies for this not being made clearer in the question - I will amend accordingly – isNaN1247 Dec 23 '11 at 18:43

score 2 · Answer 3 · answered Dec 23 '11 at 18:45

2

.addClass() will only add a class if it doesn't already exist and .removeClass() only removes an existing class so the following should work:

if (someCondition) {
  myElement.addClass(someClass);
} else {
  myElement.removeClass(someClass);
}

answered Dec 23 '11 at 18:45

jamesmk

98
3

score 1 · Answer 4 · answered Dec 23 '11 at 18:37

1

Since jQuery 1.4 there is a neater way of doing this using toggleClass function. See details here.

answered Dec 23 '11 at 18:37

TheVillageIdiot

40,053
20
133
188

Johnny Craig · Answer 5 · 2011-12-23T19:17:27.863

1

this should do it as well

if (someCondition) {
    $(myElement+":not(.someClass)").addClass(someClass);
}else{
    $(myElement+":has(.someClass)").removeClass(someClass);
}

edited Dec 23 '11 at 19:17

answered Dec 23 '11 at 18:38

Johnny Craig

4,974
2
26
27

Neater way of checking adding/removing a CSS class using 'hasClass' in jQuery?

Overview

In code, this translates to

Is there a neater way of writing the above?

Clarity on toggling

5 Answers5

Linked