jQuery hasClass() Method

What Is hasClass()?

.hasClass(className) returns true if any matched element has that CSS class (since jQuery 1.2). It only reads the class list — it never changes the DOM.

$("#mydiv").hasClass("foo")   // true if class is present
$("#mydiv").hasClass("bar")   // true even if other classes exist
$("#mydiv").hasClass("quux")  // false if missing

// Set of elements → true if ANY match has the class
$("p").hasClass("selected")

How to Use hasClass()

Select elements, pass one class name, branch on the boolean.

1. Select the element(s) with jQuery.
2. Call .hasClass("name") with a single class name (no leading dot).
3. Use the true / false result in an if or variable.
4. To test one element in a set, narrow first with .first() or .eq(n).

Pseudocode

function hasClass(elements, className):
    for each element in elements:
        if element has className:
            return true
    return false

// Official idea:
$("p").first().hasClass("selected")  → false
$("p").last().hasClass("selected")   → true
$("p").hasClass("selected")          → true  (any match)

Cheat Sheet

Keep these facts handy while checking classes.

Live Preview

Run the official demo checks against two sample paragraphs (selected on the second only).

$("p").first().hasClass("selected")
→ false

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

// <p>…</p><p class="selected">…</p>
console.log($("p").first().hasClass("selected")); // false
console.log($("p").last().hasClass("selected"));  // true
console.log($("p").hasClass("selected"));         // true

false
true
true

// <div id="mydiv" class="foo bar"></div>
var $div = $("#mydiv");
console.log($div.hasClass("foo"));  // true
console.log($div.hasClass("bar"));  // true
console.log($div.hasClass("quux")); // false

true
true
false

// <li>A</li><li class="done">B</li><li>C</li>
console.log($("li").hasClass("done"));        // true (item B)
console.log($("li").eq(0).hasClass("done"));  // false (item A)
console.log($("li").eq(1).hasClass("done"));  // true  (item B)

true
false
true

// <div id="card" class="highlight">Card</div>
var $card = $("#card");
if ($card.hasClass("highlight")) {
  $card.removeClass("highlight");
} else {
  $card.addClass("highlight");
}
console.log($card.hasClass("highlight")); // false

false

Performance Notes

Prefer .hasClass() for a plain class name. Use .is() when you need a richer selector. Avoid calling it repeatedly inside tight loops over huge collections.

Key Takeaways