jQuery .hasClass() Method

What You’ll Learn

The .hasClass() method tests whether matched elements have a specific CSS class name and returns a plain Boolean — not a jQuery object. This tutorial covers single-class syntax, any-vs-all set behavior, comparisons with .is(), .toggleClass(), and .addClass(), and practical filter and form-guard patterns.

Introduction

After you add classes with .addClass() or toggle them with .toggleClass(), your JavaScript often needs to read that state before deciding what to do next — enable a button, show a panel, or skip an animation. jQuery provides .hasClass() for exactly that.

Available since jQuery 1.2, .hasClass() inspects the class attribute on matched elements and returns true if at least one element carries the given class name, or false otherwise. Unlike .addClass() and most other jQuery methods, it returns a plain Boolean — not a jQuery object — so you use it inside if statements, callbacks, and filters.

Understanding the .hasClass() Method

Given a jQuery object representing one or more DOM elements, .hasClass( className ) checks whether any element in that collection has the specified class. It is a read-only operation — it never modifies the DOM or the element’s classes.

Think of it as asking a yes-or-no question: “Does this element (or any element in this set) have the class selected?” Pair it with .addClass() and .removeClass() when you need conditional logic, or with .filter() when you need to narrow a collection to elements that already carry a state class.

📝 Syntax

jQuery .hasClass() accepts one argument form:

String — single class name (since 1.2)

.hasClass( className )

• className — a single CSS class name to test (one name per call — not a space-separated list).

Return value

• A plain Boolean — true if at least one matched element has the class, false otherwise.
• Not chainable as a jQuery method — store the result or use it in a condition.

Important note

Official jQuery API example

$( "p" ).first().hasClass( "selected" );   // false
$( "p" ).last().hasClass( "selected" );    // true
$( "p" ).hasClass( "selected" );           // true — any match

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 show conditional toggles, filtering, and form guards. Use DevTools or the Try-it links to run each snippet in the browser.

$( "#result1" ).append( $( "p" ).first().hasClass( "selected" ).toString() );
$( "#result2" ).append( $( "p" ).last().hasClass( "selected" ).toString() );
$( "#result3" ).append( $( "p" ).hasClass( "selected" ).toString() );

First paragraph has selected class: false
Second paragraph has selected class: true
At least one paragraph has selected class: true

var $div = $( "#mydiv" );

$div.hasClass( "foo" );   // true
$div.hasClass( "bar" );   // true
$div.hasClass( "quux" );  // false

hasClass("foo"): true
hasClass("bar"): true
hasClass("quux"): false

$( ".card" ).on( "click", function() {
  var $el = $( this );
  if ( $el.hasClass( "highlight" ) ) {
    $el.removeClass( "highlight" );
  } else {
    $el.addClass( "highlight" );
  }
} );

Click card without highlight → .addClass("highlight") — yellow background

Click again → .removeClass("highlight") — back to default

Same effect as .toggleClass("highlight") but explicit branch logic

var done = $( "#tasks li" ).filter( function() {
  return $( this ).hasClass( "done" );
} );

$( "#count" ).text( "Completed tasks: " + done.length );

Completed tasks: 2

"Show completed only" → hides non-done items, shows li.done

"Show all" → restores full list

function syncSubmit() {
  var ok = $( "#terms" ).hasClass( "checked" );
  $( "#submit" ).prop( "disabled", !ok );
}

$( "#terms" ).on( "click", function() {
  $( this ).toggleClass( "checked" );
  syncSubmit();
} );

Initial state → Submit disabled (no .checked class)

Click terms → .toggleClass("checked") → hasClass("checked") is true → Submit enabled

Click again → class removed → Submit disabled again

🚀 Common Use Cases

• Conditional styling — if (!$el.hasClass("active")) { $el.addClass("active"); } before running an animation.
• Filter collections — $("li").filter(function(){ return $(this).hasClass("done"); }) to count or show completed items.
• Form validation gates — $("#terms").hasClass("checked") before enabling submit or proceeding to the next step.
• Skip redundant updates — if (!$panel.hasClass("open")) { $panel.addClass("open"); } to avoid re-triggering transitions.
• Menu state checks — if ($("nav").hasClass("mobile-open")) { ... } before closing or measuring layout.
• Plugin initialization guard — if (!$el.hasClass("plugin-initialized")) { initPlugin($el); $el.addClass("plugin-initialized"); }.

📝 Notes

• Available since jQuery 1.2 — core class inspection API.
• Returns a plain Boolean — not a jQuery object; cannot chain further jQuery methods.
• Accepts only one class name per call — not a space-separated list.
• On a multi-element set, returns true if any element has the class.
• Read-only — does not add, remove, or toggle classes.
• SVG and XML elements supported since jQuery 1.12.

💡 Best Practices