jQuery .addClass() Method

What You’ll Learn

The .addClass() method appends one or more CSS class names to each matched element — it never replaces existing classes. This tutorial covers all four API overloads (string, array, callback, callback returning array), comparisons with .removeClass(), .toggleClass(), and .css(), and practical tab-toggle patterns.

Introduction

Styling in modern web pages usually lives in CSS files — reusable class names like .active, .error, or .hidden that you toggle on elements at runtime. When JavaScript needs to turn a style on, jQuery provides .addClass().

Available since jQuery 1.0, .addClass() updates the class attribute on each matched element. It appends new class names without removing what is already there — unlike setting element.className directly, which would wipe existing classes. For inline property values, use .css() instead.

Understanding the .addClass() Method

Given a jQuery object representing one or more DOM elements, .addClass() adds the specified class name(s) to each element’s class attribute. Styles defined in your stylesheet for those classes take effect immediately — no need to set individual CSS properties in JavaScript.

Think of classes as labels you stick onto elements. .addClass() adds more labels; .removeClass() peels them off; .toggleClass() flips a label on or off. This keeps presentation in CSS and behavior in JavaScript — a clean separation of concerns.

📝 Syntax

jQuery .addClass() accepts four argument forms:

1. String — one or more class names (since 1.0)

.addClass( className )

• className — a string of one or more space-separated CSS class names to add to each matched element.

2. Array — list of class names (since 3.3)

.addClass( [ classNames ] )

• classNames — an array of strings; jQuery adds every entry to each element.

3. Function — per-element class name (since 1.4)

.addClass( function( index, currentClass ) {
  // return className string
} )

• index — zero-based index of the element within the matched set.
• currentClass — the element’s current class attribute value (or empty string).
• Return a string of class name(s) to add for that element.

4. Function returning array (since 3.3)

The callback may return an array of class names instead of a space-separated string:

$( "li" ).addClass( function( index ) {
  return [ "item-" + index, "row-" + index ];
} );

Return value

• The original jQuery object (for chaining) — not a new collection.

Official jQuery API example

$( "p" ).last().addClass( "selected" );

// Last paragraph gets class "selected" — other classes preserved

Examples Gallery

Examples 1–4 follow the official jQuery API documentation. Example 5 shows a practical tab toggle. Use DevTools or the Try-it links to run each snippet in the browser.

$( "p" ).last().addClass( "selected" );

Last paragraph → class "selected" added (e.g. blue text)

First two paragraphs → unchanged

$( "p" ).last().addClass( "selected highlight" );

Last paragraph → classes "selected" and "highlight"

Red text + yellow background from stylesheet rules

$( "p" ).last().addClass( [ "selected", "highlight" ] );

Same visual result as Example 2 — both classes on last paragraph

Useful when class names come from a variable or API response

$( "ul li" ).addClass( function( index ) {
  return "item-" + index;
} );

li 0 → class "item-0" (red tint)
li 1 → class "item-1" (green tint)
li 2 → class "item-2" (blue tint)

$( ".tabs" ).on( "click", ".tab", function() {
  $( ".tab" ).removeClass( "active" );
  $( this ).addClass( "active" );
} );

Clicked tab → .active added (blue background)

Previously active tab → .active removed

Only one tab styled as active at a time

🚀 Common Use Cases

• Active navigation item — $("nav a").removeClass("active"); $(this).addClass("active").
• Form validation errors — $("input:invalid").addClass("error") to apply error styling from CSS.
• Show/hide with CSS — $(".panel").addClass("visible") where .visible { display: block; }.
• Animation hooks — $("div").addClass("animate-in") to trigger CSS transitions or keyframes.
• Row highlighting — $("tr").click(function(){ $(this).addClass("selected-row"); }).
• Delegated styling — $(this).parent().addClass("active-group") after a child click (see .parent() tutorial).

📝 Notes

• Available since jQuery 1.0 — core class manipulation API.
• Does not replace existing classes — only appends new class names.
• Array argument supported since jQuery 3.3; callback since 1.4.
• Callback receives (index, currentClass) — return string or array (3.3+).
• SVG and XML elements supported since jQuery 1.12.
• Returns the original jQuery object for chaining — e.g. .addClass("x").fadeIn().

💡 Best Practices