When working with dynamic web applications, you’ll often need to check whether an HTML element contains a specific CSS class. jQuery provides several powerful methods to accomplish this task efficiently.
In this comprehensive guide, we’ll explore all the ways to check if an element has a class using jQuery, complete with practical examples and best practices.
What is the hasClass() Method?
The hasClass() method is jQuery’s primary tool for checking whether selected elements contain a specified class name. This method returns a Boolean value (true or false), making it perfect for conditional statements and dynamic behavior implementation.
Basic Syntax:
$(selector).hasClass('className')The method will return true if any of the selected elements have the specified class, even if other classes are also present.
Basic Usage Examples
Let me explain to you the basic usage examples to check if an element has a class.
Example 1: Simple Class Check
Demonstrates checking if a single element contains a specific class using `hasClass()`.
<div id="myDiv" class="container active highlight">Content here</div>// Check if element has 'active' class
if ($('#myDiv').hasClass('active')) {
console.log('Element has active class');
} else {
console.log('Element does not have active class');
}
// Output: "Element has active class"You can see the output in the screenshot below.
Example 2: Multiple Elements Check
Shows how to check multiple elements to see if at least one has a particular class.
<ul>
<li class="item selected">Item 1</li>
<li class="item">Item 2</li>
<li class="item selected">Item 3</li>
</ul>// This returns true because at least one li has 'selected' class
if ($('.item').hasClass('selected')) {
console.log('At least one item is selected');
}Advanced Implementation Techniques
Let me show you the advanced implementation techniques.
Check for Multiple Classes
Sometimes you need to verify if an element contains multiple specific classes:
// Method 1: Chain hasClass() calls
if ($('#myElement').hasClass('class1') && $('#myElement').hasClass('class2')) {
console.log('Element has both classes');
}
// Method 2: Using custom function for multiple class check
function hasMultipleClasses(element, classes) {
return classes.every(className => element.hasClass(className));
}
// Usage
if (hasMultipleClasses($('#myElement'), ['class1', 'class2', 'class3'])) {
console.log('Element has all required classes');
}You can see the output in the screenshot below.
Dynamic Class Checking with Variables
This example shows how to check for a class dynamically using a variable to control element behavior.
let targetClass = 'premium-user';
let userElement = $('.user-profile');
if (userElement.hasClass(targetClass)) {
// Show premium features
$('.premium-features').show();
} else {
// Show upgrade prompt
$('.upgrade-prompt').show();
}Practical Real-World Examples
I will explain to you some practical, real-world examples.
Example 1: Custom Checkbox Implementation
Demonstrates toggling a class on click to create a custom checkbox behavior with visual feedback.
<div class="custom-checkbox" data-value="option1">
<span class="checkbox-label">Enable notifications</span>
</div>$('.custom-checkbox').click(function() {
if ($(this).hasClass('checked')) {
$(this).removeClass('checked');
console.log('Checkbox unchecked');
} else {
$(this).addClass('checked');
console.log('Checkbox checked');
}
});You can see the output in the screenshot below.
Example 2: Navigation Menu State Management
Shows how to manage active states in a navigation menu by adding/removing classes dynamically.
<nav>
<ul class="menu">
<li><a href="#home" class="nav-link active">Home</a></li>
<li><a href="#about" class="nav-link">About</a></li>
<li><a href="#contact" class="nav-link">Contact</a></li>
</ul>
</nav>$('.nav-link').click(function(e) {
e.preventDefault();
// Check if clicked link is already active
if (!$(this).hasClass('active')) {
// Remove active class from all links
$('.nav-link').removeClass('active');
// Add active class to clicked link
$(this).addClass('active');
// Load corresponding content
loadContent($(this).attr('href'));
}
});Example 3: Form Validation with Visual Feedback
Uses class checks to validate form inputs and provide real-time visual feedback before submission.
<form id="contactForm">
<input type="email" id="email" class="form-input" required>
<button type="submit">Submit</button>
</form>$('#email').on('blur', function() {
let email = $(this).val();
let emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (emailPattern.test(email)) {
if ($(this).hasClass('error')) {
$(this).removeClass('error').addClass('valid');
}
} else {
if (!$(this).hasClass('error')) {
$(this).removeClass('valid').addClass('error');
}
}
});
$('#contactForm').submit(function(e) {
if ($('.form-input').hasClass('error')) {
e.preventDefault();
alert('Please fix all errors before submitting');
}
});You can see the output in the screenshot below.
Alternative Methods for Class Detection
Let us see some alternative methods for class detection.
Use jQuery’s is() Method
Checks if an element matches a specific class or multiple classes using the `.is()` method.
// Alternative approach using is() method
if ($('#myElement').is('.className')) {
console.log('Element has the class');
}
// Checking multiple conditions
if ($('#myElement').is('.active, .highlighted, .selected')) {
console.log('Element has at least one of these classes');
}Use Attribute Selectors
Detects a class by inspecting the element’s `class` attribute and checking if it contains a specific class name.
// Check if class attribute contains specific class
if ($('#myElement').attr('class').includes('target-class')) {
console.log('Class found');
}Performance Considerations and Best Practices
Here are the performance considerations and best practices.
1. Cache jQuery Objects
Improves performance by storing selections in a variable to avoid repeated DOM queries.
// Good practice - cache the jQuery object
let $element = $('#myElement');
if ($element.hasClass('active')) {
$element.addClass('processing');
}
// Avoid repeatedly selecting the same element
// Bad: $('#myElement').hasClass('active') multiple times2. Use Specific Selectors
Enhances efficiency by targeting elements precisely rather than using broad selectors.
// More efficient - specific selector
$('#specificId').hasClass('className')
// Less efficient - broad selector
$('.many-elements').hasClass('className')3. Combine with Other jQuery Methods
Boosts performance and readability by chaining methods instead of multiple separate calls.
// Efficient chaining
$('#myElement')
.hasClass('ready') &&
$('#myElement').fadeIn().addClass('visible');Common Pitfalls to Avoid
- Case Sensitivity: Class names are case-sensitive
// These are different classes
$element.hasClass('Active') // Capital A
$element.hasClass('active') // Lowercase a- Whitespace Issues: Avoid spaces in class name parameter
// Wrong
$element.hasClass('class1 class2')
// Correct - check separately
$element.hasClass('class1') && $element.hasClass('class2')Browser Compatibility
The hasClass() method works across all major browsers and jQuery versions. It’s been a stable part of jQuery since version 1.2, making it reliable for production environments.
Conclusion
The jQuery hasClass() method is an essential tool for modern web development, enabling dynamic user interfaces and interactive web applications. Whether you’re building custom form controls, managing navigation states, or implementing complex UI logic, understanding how to effectively check for CSS classes will make your code more robust and maintainable.
Remember to cache your jQuery objects, use specific selectors when possible, and always test your implementations across different browsers. With these techniques and examples, you’re well-equipped to handle any class-checking scenario in your jQuery projects.
For more advanced jQuery techniques and best practices, continue exploring the extensive jQuery API documentation and consider the performance implications of your selector choices in larger applications.
You may also read other articles on jQuery:
- 51 jQuery Examples with Source Code
- How to Check if Input is Empty Using jQuery
- jQuery Check if Array is Empty
- jQuery Check if String Contains Specific Word
I am Bijay Kumar, a Microsoft MVP in SharePoint. Apart from SharePoint, I started working on Python, Machine learning, and artificial intelligence for the last 5 years. During this time I got expertise in various Python libraries also like Tkinter, Pandas, NumPy, Turtle, Django, Matplotlib, Tensorflow, Scipy, Scikit-Learn, etc… for various clients in the United States, Canada, the United Kingdom, Australia, New Zealand, etc. Check out my profile.
