I want to check if an element has this class or another class like this:

if ( $elem.hasClass("foo") || $elem.hasClass("bar") ) {
  // do something
}

And I also want to check if an element has two classes:

if ( $elem.hasClass("foo") && $elem.hasClass("bar") ) {
  // do something else
}

Is there a way to do this all within the hasClass() function? Something like:

if ( $elem.hasClass("foo bar") ) {
  // do something when element has both classes
}
else if ( $elem.hasClass("foo","bar") ) {
  // do something when element has either class
}

I want to check if an element has this class or another class like this:

if ( $elem.hasClass("foo") || $elem.hasClass("bar") ) {
  // do something
}

And I also want to check if an element has two classes:

if ( $elem.hasClass("foo") && $elem.hasClass("bar") ) {
  // do something else
}

Is there a way to do this all within the hasClass() function? Something like:

if ( $elem.hasClass("foo bar") ) {
  // do something when element has both classes
}
else if ( $elem.hasClass("foo","bar") ) {
  // do something when element has either class
}

• javascript
• jquery

• 5 You can try use $element.is('.foo, .bar') – Oleksandr T. Commented Jun 11, 2015 at 19:30
• possible duplicate of JQuery .hasClass for multiple values in an if statement – depperm Commented Jun 11, 2015 at 19:31
• 3 How do you want to express two contrary expressions with a single expression? Does $elem.hasClass("foo bar") mean that it has both classes or one of the classes? How should jQuery know what you want to express if you don't tell it? – Felix Kling Commented Jun 11, 2015 at 19:42
• 1 Then use e.g if($element.is('.foo.bar')){...}else if($element.is('.foo, .bar')){...} – A. Wolff Commented Jun 11, 2015 at 19:46
• so is() is more useful than hasClass() whenever more than one class or condition is being used? – JLF Commented Jun 11, 2015 at 19:49

2 Answers 2

Strictly answering to your question: no, you can not.

hasClass() accepts a single argument.

As pointed out by others, you might use is(), but here is a test that shows that performances are very much penalized.

I suggest you to stay with your current code.

You could do something a little different to acplish this. Not sure if this meets your needs though.

1. Use multiple selectors you can see if an element that matches exists on the page
2. Use each to execute the code you want

Example of something like this:

$("span.foo, span.bar").each( function() {
  $(".test").html("foo or bar was found");
});

JS Fiddle: http://jsfiddle/s3gL5pwm/1/

A second solution that uses if would be to use .is() instead.

For example:

if ($("span").is(".foo, .bar")) { 
    $(".test").html("foo or bar exists");    
};

JSfiddle: http://jsfiddle/eL2a8smt/