jQuery addClass() Method Tutorial

jQuery addClass() Method Tutorial

The jQuery addClass() method is used to add one or more class names to a selector. To add more than one class name, separate them using spaces.

Syntax of jQuery addClass

$(selector).addClass(classname,function(index,currentclass))
Parameter Description
classname Required Parameter: names of the classes to be added to the selector
function(index,currentClass) Optional Parameter: A function that returns one or more class names that are spaces-separated. The returned class names are added to the selector.

  • index: index position of the element in the selector.
  • currentClass: current class names of the element in the selector.

Example 1: Add a Single Class Name

I have a paragraph element to which I will apply Class Name “red”.

<style>
.red {
    color: Red;
}
</style>

<p id="myParagraph">My Paragraph</p>
<button id="myButton">Add Class</button>

On the button Click I use jQuery addClass like this:

$("#myButton").click(function (e) {
    $("#myParagraph").addClass("red");
});

This will add the red Class to the paragraph and its color changes to Red.

DEMO

Example 2: Add 3 Class Names

I can add more than one class to the selector using jQuery addClass. So here I add 3 Classes to the paragraph element. These classes are “red”, “fontBold” and “borderSolid”.

<style>
.red {
    color: Red;
}

.fontBold {
    font-weight: bold;
}

.borderSolid {
    border: solid 1px #4CAF50;
}
</style>

<p id="myParagraph">My Paragraph</p>
<button id="myButton">Add 3 Class</button>

The jQuery code:

$("#myButton").click(function (e) {
    $("#myParagraph").addClass("red fontBold borderSolid");
});

In the jQuery addClass method each of the 3 class names are separated by space. So on the button click the myParagraph element will become red in color, with font weight bold and a solid border.

DEMO

Example 3: Using jQuery addClass Function Parameter

The return class name by the addClass() function parameter is applied to the selector. Let me show you how to use this function.

I have 3 paragraph element, 2 already have “red” class while the 3rd does not contain any class. Now I want to add “borderSolid” class to the paragraph whose index is not 0 and does not contain “red” class.

<style>
.red {
    color: Red;
}

.borderSolid {
    border: solid 1px #4CAF50;
}
</style>

<p class="red">First Paragraph with class "Red"</p>
<p class="red">Second Paragraph with class "Red"</p>
<p>Third Paragraph without any class</p>
<button id="myButton">Add Class</button>

The jQuery addClass code will be:

$("#myButton").click(function (e) {
    $("p").addClass(function (index, currentClass) {
        if (index != 0 && currentClass == "red")
            return "borderSolid";
    });
});

I used the addClass function and did a check for index not 0 and currentClass not red. I returned borderSolid at the end and this class is added to the 3rd paragraph element.

DEMO DOWNLOAD

Share this article -

yogihosting

ABOUT THE AUTHOR

This article has been written by the Technical Staff of YogiHosting. Check out other articles on "WordPress, SEO, jQuery, HTML" and more.