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.
The .addClass() method manipulates the className property of the selected elements, not the class attribute. Once the property is changed, it's the browser that updates the attribute accordingly. An implication of this behavior is that this method only works for documents with HTML DOM semantics (e.g., not pure XML documents).
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" ).addClass(function( index ) {
return "item-" + index;
});Given an unordered list with two <li> elements, this example adds the class "item-0" to the first <li> and "item-1" to the second.
One or more space-separated classes to be added to the class attribute of each matched element.
A function returning one or more space-separated class names to be added to the existing class name(s). Receives the index position of the element in the set and the existing class name(s) as arguments. Within the function, this refers to the current element in the set.
Add the class "selected" to the matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: blue;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p" ).last().addClass( "selected" );
</script>
</body>
</html>
Add the classes "selected" and "highlight" to the matched elements.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
p {
margin: 8px;
font-size: 16px;
}
.selected {
color: red;
}
.highlight {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hello</p>
<p>and</p>
<p>Goodbye</p>
<script>
$( "p:last" ).addClass( "selected highlight" );
</script>
</body>
</html>
Pass in a function to .addClass() to add the "green" class to a div that already has a "red" class.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>addClass demo</title>
<style>
div {
background: white;
}
.red {
background: red;
}
.red.green {
background: green;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.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>
Please login to continue.