How to check if an element has a class using jQuery / How to check the presence of a class on an element using jQuery

Overview

A web element may have an attribute class with some value. An example is <input type = "text" class = "myClass"/>. The value of class name may represent a CSS(Cascading Style Sheet) styling rule which will be applied on elements having this class such as .myClass{ background-color : blue} or it may be used to distinguish it from other elements which do not have this class.

Why check the presence of class

Some readers may think why will I ever require to check the presence of a class on an element. This can be answered by a practical scenario.

Suppose there is a web page which has many input boxes. Some of these input boxes should be disabled at page load time and they are enabled when some specific event occurs. How will you disable many input boxes at once. You can’t use their ids to select and disable them as it is not an elegant approach.

The solution is to apply a class to all input boxes which should be disabled and select all input boxes which have this class and disable them in one go. In future if any other input is added which also needs to be disabled initially, just add this class to the input and you are good to go.

How to check

There are two ways by which you can check that an element has a certain class or not in jQuery. They are :

Method 1 : Using hasClass Method

jQuery has a hasClass method which takes a class name as argument and checks the presence of this class on the element. It returns true if the element has this class and false otherwise.

First the element is selected using its id or class and using this selection, the hasClass method is called.

     codippa.com

In the above example, the function checkClass() returns true since the element selected contains the class specified in hasClass() method.

Method 2 : Using is() method

jQuery’s is method may be used to check the presence of a class. It takes a String as an argument which is the class name that needs to be checked prefixed with a “.“ and returns true if the element has the class name, false otherwise. The element is selected using appropriate selector and this method is called with the supplied class name.

     codippa.com

In the above example, the function checkClass() returns true since the element selected contains the class specified in is() method.

Let’s tweak in

1. is method can check for multiple classes at a time. That is if an element has more than one classes, is method can check the presence of all classes in the same call. For Example, if an element has two classes classOne and classTwo, we can test for the presence of both classes as $(elementSelector).is('.classOne.classTwo').
2. When checking for multiple classes using is function, remember to prefix all classes by a “.” and remove any spaces between different classes.
3. When checking for multiple classes, is function checks for the presence of all classes and returns true if all the classes are present and false if any of the class is not present.
4. hasClass method cannot be used to check the presence of multiple classes at the same time.
5. is method can also be used to check the presence of an attribute on a element. For Example, to check if an element has id attribute, use syntax $(elementSelector).is("[id]");