How to add a class to the last paragraph element using jQuery ?

How to add a class to the last paragraph element using jQuery ?

Last Updated : 31 Dec, 2020

In this article, we will learn to add a class to the last paragraph element using jQuery. To add a class to the last paragraph element, we use last() and addClass() methods. The jQuery last() function is an inbuilt function that is used to find the last element of the specified elements.

Syntax:

$(selector).last()

The addClass() method is used to add more classes and their respective properties to each selected element. It can also be used to change the property of the selected element. Here, the class name can be used directly with the element which is going to be selected.

Syntax:

$(selector).addClass(className);

Example:

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <style>
        .GFG {
            color: green;
            font-size: 24px;
            font-weight: bold;
        }
    </style>

    <!-- Import jQuery cdn library -->
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>

    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").last().addClass("GFG");
            });
        });
    </script>
</head>

<body style="text-align: center;">
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>
        How to add a class to the last
        paragraph element using jQuery?
    </h3>
 
    <p>GeeksforGeeks computer science portal</p>

    <button>Click Here!</button>
</body>

</html>

Output:

Before Click the Button:

After Click the Button:

How to add a class to the last paragraph element using jQuery ?

V

vkash8574

Improve

Article Tags :

Similar Reads

How to click a button to animate the paragraph element using jQuery ?

In this article, we will click a button to animate the paragraph element using jQuery. To animate the paragraph elements, we use animate() method. The animate() method is used to change the state of the element with CSS style. This method can also be used to change the CSS property to create the ani

How to align the last line of a paragraph element to the right using CSS?

In this article, we will set the alignment of last paragraph element to the right by using CSS property. To set the alignment of last paragraph to right, we use CSS text-align-last property. The text-align-last is used to set the last line of the paragraph just before the line break. The line break

How to find all paragraph elements using jQuery ?

Given a webpage containing paragraph elements and the task is to find every paragraph element using the jQuery module. We have to find the <p> elements from the HTML page, and you can achieve this task by using the element selectors. The element selector will select the element based on the el

How to add and remove CSS classes to an element using jQuery ?

In this article, we will see how to add or remove the CSS classes to an element using jQuery. To add the CSS classes to an element we use addClass() method, and to remove the CSS classes we use removeClass() method. Syntax: The syntax for adding CSS classes to an element: $('selector').addClass(clas

How to append some text to all paragraphs using jQuery ?

In this article, we will append some text to all paragraph elements using jQuery. To append some text to all paragraph elements, we use append() and document.createTextNode() methods. jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).appen