jquery-Attributes

These methods get and set DOM attributes of elements.

by creativevilla

HTML

<h1>jquery-Attributes</h1>

<section>
    
<h3>.addClass()</h3>

    <p>Description: Adds the specified class(es) to each element in the set of matched elements.</p>
    <p class="add-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, placeat.</p>
    <p class="add-para">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo, placeat.</p>
    <p 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.</p>
</section>

CSS

.red {
    color: #f00;
}
.red.green {
    color: #0f0;
}

JavaScript

(function ($) {
$(document).ready(function () {
    $('.add-para').addClass('new-para'); // new-para class is added
    $('.add-para').addClass('my-class-1 my-class-2'); // Two classes are added simultaneously
    $('.add-para').addClass(function (index) {
        console.log("class-" + index);
        return "class-" + index;
    });
    $("p").addClass(function (index, currentClass) {
        console.log("Index " + index, " Current Class - " + currentClass);
        var addedClass;

        if (currentClass === "red") {
            addedClass = "green";
            $("p").text("There is one green div");
        }
    });
}(jQuery));