Select elements with multiple classes in jQuery

Question

If an element has multiple classes like this:

class="btn btn-primary add-movie-button is-on"

can I select it only by one class name using jQuery like:

$(".add-movie-button")

Can I use .hasClass("is-on") for this element?

@j08691: Are you sure about that duplicate? This seems to ask if a single class can be used even though the element has multiple. — , Oct 05 '16 at 16:50

score 1 · Answer 1 · answered Oct 05 '16 at 16:53

1

Can I use .hasClass("is-on") for this element? The Answer is yes!

if($(".add-movie-button").hasClass("is-on")){
  console.log('it worked')
}

answered Oct 05 '16 at 16:53

Dennisrec

Mark Schultheiss · Accepted Answer · 2016-10-05T17:03:42.377

With a class on an element like so: class="btn btn-primary add-movie-button is-on"

You can select by one or more than one class. Adding more classes increases specificity.

For example:

$(".add-movie-button")

is less specific than

$(".add-movie-button.is-on")

In either case you can use the hasClass returning a boolean;

var isClassy = $(".add-movie-button.is-on").hasClass("is-on");
var isSmallClassy = $(".add-movie-button").hasClass("is-on");

Note that this would return true if ANY element matched the conditions. If you desire to see if ALL do then use length:

var longClasses = $(".add-movie-button.is-on");
var shortClasses = $(".add-movie-button");

var both = longClasses.length === shortClasses.length;

2 Answers2