.addClass()

addClass ( className )

addClass ( function(index, currentClass) )

.addClass()

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

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's argument can receive a function.

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

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

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.js'></script>
</head>
<body>
<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>
$("p:last").addClass("selected");
</script>
</body>
</html>

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.js'></script>
</head>
<body>
<p>Hello</p>
  <p>and</p>
  <p>Goodbye</p>
<script>
$("p:last").addClass("selected highlight");
</script>
</body>
</html>

Example : Pass in a function to .addClass() to add the "green" class to a div that already has a "red" class.

<!DOCTYPE html>
<html>
<head>
<style>
div { background: white; }
  .red { background: red; }
  .red.green { background: green; }
</style>
<script src='http://code.jquery.com/jquery-latest.js'></script>
</head>
<body>
<div>This div should be white</div>
 <div class="red">This div will be green because it now has the "green" and "red" classes.
   It would be red if the addClass function failed.</div>
 <div>This div should be white</div>
 <p>There are zero green divs</p>
<script>
$("div").addClass(function(index, currentClass) {
    var addedClass;

    if ( currentClass === "red" ) {
      addedClass = "green";
      $("p").text("There is one green div");
    }
  
    return addedClass;
  });
</script>
</body>
</html>