Open In App

How to check an element contains specific class in jQuery ?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how to check if an element contains a specific class using jQuery. The Jquery function called hasClass() function will be used, which will return a boolean result if the particular element contains any specific class. Note that we can check for multiple classes available in a single tag.

Syntax:

$(<slector>).hasClass(<Name of the class or classes>);

For instance, we have a div tag have a class named parent.

<div class = "parent"></div>

Then the following jQuery script will return true, and if we pass the otherwise parameter then it will simply return false.

$("div").hasClass("parent");

Example 1: In this working example we will have a <h1> and a <p> tag, we will have a class name in the <p> tag, and there will be two buttons for separately checking for classes in the following HTML tags. Since we have included the subtitle class in the <p> tag so it will return the true as an alert pop-up and false for the <h1> tag, which We can see in the output.

HTML




<!DOCTYPE html>
<html>
    
<head>
    <title>
        Checking the element for containing
        the specific class
    </title>
      
    <!-- CDN of jQuery -->
    <script src=
    </script>
    <style>
        .Parent {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    </style>
</head>
  
<body>
    <div class="Parent">
        <h1 style="color: green;">GeeksforGeeks</h1>
        <button id="btn1">Check</button>
        <p class="subtitle" 
           style="color: green">
            GeeksforGeeks
        </p>
  
        <button id="btn2">Check</button>
    </div>
  
    <script>
        $(document).ready(function() {
            $('#btn1').click(function() {
                  
                // h1 does not contain any class
                alert($("h1").hasClass("subtitle"));
            });
              
            // p contain a class name subtitle
            $('#btn2').click(function() {
                alert($("p").hasClass("subtitle"));
            })
        })
    </script>
</body>
</html>


Output:

 

Example 2: In this, another example we are including two more classes in the <p> tag and check or every single class, this hasClass() method will work for multiple classes, so it will return the true result in each case, we will be using multiple if statement for checking different class names.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Checking the element for containing
        the specific class 
    </title>
      
    <!-- CDN of jQuery -->
    <script src=
    </script>
    <style>
        .Parent {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }
    </style>
</head>
  
<body>
    <div class="Parent">
        <h1 style="color: green">
            GeeksforGeeks
        </h1>
        <button id="btn1">Check</button>
        <p class="subtitle subtext testclass" 
           style="color: green">
            GeeksforGeeks
        </p>
  
        <button id="btn2">Check</button>
    </div>
    <script>
        $(document).ready(function() {
            $('#btn1').click(function() {
                // h1 does not contain any class;
                alert($("h1").hasClass("subtitle"));
            });
            // p contain a class name subtitle;
            $('#btn2').click(function() {
                  
                // Checking for subtitle class.
                if($("p").hasClass("subtitle")) 
                    alert("it has subtitle class");
                      
                // Checking for subtext class.
                if($("p").hasClass("subtext")) 
                    alert("it also has subtext class");
                      
                // Checking for testclass.
                if($("p").hasClass("testclass")) 
                    alert("and it also has testclass");
            })
        })
    </script>
</body>
</html>


Output:

 



Last Updated : 01 Sep, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads