hasClass method in jQuery with example

Home » JQuery » jQuery Methods » hasClass method in jQuery with example

hasClass method in jQuery with example

Posted by 20Fingers2Brains on Tags: JQuery , jQuery Methods

1. hasClass() method determines whether matched elements in jQuery object are assigned the given class.

2. hasClass() method accepts classname to check as parameter.

3. Elements can have more than 1 class. In this case two classes can be specified as parameter separated by space.

Example 1 :

        <html>
        <head>
        <title>hasClass</title>
        <style type="text/css">
        .default
        {
        color:Red;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#checkP").click(function () {
                    var hasClass = $("p").hasClass("default");
                    alert("p has class default ?? : " + hasClass);
                });
                $("#checkSpan").click(function () {
                    var hasClass = $("span").hasClass("default");
                    alert("span has class default ?? : " + hasClass);
                });
            });
        </script>
        </head>
        <body>
        <p class="default">This is paragraph element.</p>
        <span>This is span element.</span><br /><br />
        <input type="button" id="checkP" value="Check p for default class" />
        <input type="button" id="checkSpan" value="Check span for default class" />
        </body>
        </html>

Demo :

In the above example, we have created a paragraph element and span element. We have assigned "default" class to paragraph element.
We have created buttons respective to elements, to check whether elements has class "default" assigned to them or not using hasClass() method.

Example 2 : checking multiple classes

        <html>
        <head>
        <title>hasClass</title>
        <style type="text/css">
        .default
        {
        color:Red;
        }
        .changed
        {
        font-family:comic sans ms;
        }
        </style>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                var className = "default changed";
                $("#checkP").click(function () {
                    var hasClass = $("p").hasClass(className);
                    alert("p has class " + className + " ?? : " + hasClass);
                });
                $("#checkSpan").click(function () {
                    var hasClass = $("span").hasClass(className);
                    alert("span has class  " + className + " ?? : " + hasClass);
                });
            });
        </script>
        </head>
        <body>
        <p class="default changed">This is paragraph element.</p>
        <span>This is span element.</span><br /><br />
        <input type="button" id="checkP" value="Check p for default class" />
        <input type="button" id="checkSpan" value="Check span for default class" />
        </body>
        </html>

Demo :

This example is same as above. In this we are checking for more than one class.

Example 3 :

        <html>
        <head>
        <title>hasClass</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> 
        </script>
        <script type="text/javascript">
            $(document).ready(function () {
                $("#targetDiv").append($("#targetDiv").hasClass("targetClass").toString());
                $("#targetP").append($("#targetP").hasClass("targetClass").toString());
                $("#targetSpan").append($("#targetSpan").hasClass("targetClass").toString());
                $("#targetH").append($("#targetH").hasClass("targetClass").toString());
            });
        </script>
        </head>
        <body>
        <div id="targetDiv" class="targetClass">This Div has targetClass ? :</div>
        <p id="targetP">This p has targetClass ? :</p>
        <span id="targetSpan" class="targetClass">This span has targetClass ? :</span>
        <h4 id="targetH">This h4 has targetClass ? :</h4>
        </body>
        </html>

Demo :

In the above example, we are determining whether the element has class and diplaying the result on load of document using hasClass() method.