jQuery API

.addClass()

Categories: Attributes | Manipulation > Class Attribute | CSS

.addClass( className ) Returns: jQuery

Description: Adds the specified class(es) to each of the set of matched elements.

  • version added: 1.0.addClass( className )

    classNameOne or more class names to be added to the class attribute of each matched element.

  • version added: 1.4.addClass( function(index, class) )

    function(index, class)A function returning one or more space-separated class names to be added. Receives the index position of the element in the set and the old class value as arguments.

It's important to note that this method does not replace a class. It simply adds the class, appending it to any which may already be assigned to the elements.

More than one class may be added at a time, separated by a space, to the set of matched elements, like so:

$('p').addClass('myClass yourClass');

This method is often used with .removeClass() to switch elements' classes from one to another, like so:

$('p').removeClass('myClass noClass').addClass('yourClass');

Here, the myClass and noClass classes are removed from all paragraphs, while yourClass is added.

As of jQuery 1.4, the .addClass() method allows us to set the class name by passing in a function.

$('ul li:last').addClass(function() {
  return 'item-' + $(this).index();
});

Given an unordered list with five <li> elements, this example adds the class "item-4" to the last <li>.

Examples:

Example: Adds the class 'selected' to the matched elements. 

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:blue; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected");</script>

</body>
</html>

Demo:

Example: Adds the classes 'selected' and 'highlight' to the matched elements. 

<!DOCTYPE html>
<html>
<head>
  <style>

  p { margin: 8px; font-size:16px; }
  .selected { color:red; }
  .highlight { background:yellow; }
  </style>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
	<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>$("p:last").addClass("selected highlight");</script>

</body>
</html>

Demo:

Comments

  • Support requests, bug reports, and off-topic comments will be deleted without warning.

  • Please do post corrections or additional examples for .addClass() below. We aim to quickly move corrections into the documentation.
  • If you need help, post at the forums or in the #jquery IRC channel.
  • Report bugs on the bug tracker or the jQuery Forum.
  • Discussions about the API specifically should be addressed in the Developing jQuery Core forum.
  • Elanari
    Is it possible to add a class permanently to an element ? With this method, the DOM is changed only during the lifetime of the page, how could I make this change permanent ?
  • You would have to store that change on the server somehow (in a database, possibly, using server-side code) or in a cookie.
  • Nipponese
    I don't understand why the addClass selector doesn't follow the name selector format at the initial selector. How can I use addClass to specific something like ".purchase_history_table tr.odd"?
  • Tapas Adhikary
    Add Class will add a class to the element . How to query the class back ? How to do getClass() ?
  • dxDennis
    var myClass = $('element').attr('class');
    Should do it.
  • Ken
    Hey is there any way to set a duration eg:
    $('p').addClass('myClass', 500);

    ?

    Thanks
  • You can do so if you include jQuery UI.
  • Rodrigo
    Isn't there a "setClass" function to simply remove all element classes and set it a new one?
  • Rodrigo
    I just realize that I can use $(selector).attr('class','newClass');
  • Yep. You can also use $(selector).removeClass().addClass('newClass');
  • Jared Jacobs
    The difference being that Rodrigo's approach is just one DOM manipulation, so the browser is guaranteed not to draw and temporarily show an undesirable intermediate state.

    For this reason, I really wish jQuery had a replaceClass("oldClass1 oldClass2", "newClass1 newClass2") to complement .addClass and .removeClass.
  • Gijs
    Just use the real DOM underneath and a regex with .className?
  • Rob
    AFAIK jQuery collects all DOM manipulations until the end of the chain and performs them at the same time. I would imagine it's been optimised to perform the least number of actions on the DOM so the undesirable state may not ever occur.
  • tim_atom
    The difference is also that Rodrigo's approach will remove ALL classes from the element instead of being able to pick at a specific class with remove/add.