How to check an element contains specific class in jQuery ?

Last Updated : 29 Jul, 2024

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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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=
"https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
    </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:

How to select all ancestors of an element in jQuery ?

iamgaurav

Improve

Article Tags :

How to check an element contains specific class in jQuery ?

Similar Reads

Thank You!

What kind of Experience do you want to share?