How to check an element contains a class using jQuery? - GeeksforGeeks

23 Apr, 2019
Method 1: Using hasClass() method: The hasClass() is an inbuilt method in jQuery which check whether the elements with the specified class name exists or not. It returns a boolean value specifying whether the class exists in the element or not. This can be used to check for multiple classes.
Syntax:
$('element').hasClass('className')
Example:
<!DOCTYPE html><html>      <head>    <title>        How to check an element contains        a class using jQuery?    </title>          <script src=        "https://code.jquery.com/jquery-3.3.1.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        How to check an element contains        a class using jQuery?    </b>      <p class="example-class">        This element has "example-class".    </p>      <p>Does the element have class?        <span class="output"></span>    </p>      <button onclick="checkForClass()">        Click to check    </button>          <!-- Script to use hasClass() method to        check the existence of class name -->    <script type="text/javascript">        function checkForClass() {            classCheck = $('p').is('.example-class');            document.querySelector('.output').textContent                    = classCheck;        }    </script></body>  </html>                    
Output:
Method 2: Using is() method: This is similar to the above method and can be used to check more attributes if needed. The required element is selected and the class name is passed on like a CSS class selector. It returns a boolean value specifying whether the class exists in the element or not. This can be used to check for multiple classes.
Syntax:
$('element').is('.className')
Example:
<!DOCTYPE html><html>      <head>    <title>        How to check an element contains        a class using jQuery?    </title>          <script src=        "https://code.jquery.com/jquery-3.3.1.min.js">    </script></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>          <b>        How to check an element contains        a class using jQuery?    </b>      <p class="example-class">        This element has "example-class".    </p>      <p>Does the element have class?         <span class="output"></span>    </p>      <button onclick="checkForClass()">        Click to check    </button>          <!-- Script to use is() method to        check the existence of class name -->    <script type="text/javascript">        function checkForClass() {            classCheck = $('p').is('.example-class');            document.querySelector('.output').textContent                    = classCheck;        }    </script></body>  </html>                    
Output:
jQuery-Misc
Picked
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Form validation using jQuery
How to Dynamically Add/Remove Table Rows using jQuery ?
Scroll to the top of the page using JavaScript/jQuery
jQuery | children() with Examples
How to get the ID of the clicked button using JavaScript / jQuery ?
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills