How to check an element contains a class using jQuery?
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" > w3wiki </ 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" > w3wiki </ 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:
Contact Us