jQuery last() method

As its name implies, the last() method returns the last element of the selected elements. It is an inbuilt method in jQuery. If we need to get the first element, we can use the first() method.

Syntax

This method doesn't accept any argument. The selector in the above syntax is mandatory to be specified.

Let's see some of the illustrations to understand how to use the last() method.

Example1

In this example, we are using the last() method to get the last span element from the set of elements.

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("div span").last().css("background-color", "lightblue");
});
});
</script>
<style>
div {
border: 1px solid blue;
}
</style>
</head>

<body id = "main">

<h2> It is an example of using the last() method. </h2>
<div>
<span> span1 </span>
</div>
</br>
<div>
<span> span2 </span>
</div>
</br>
<div>
<span> span3 </span>
</div>
</br>
<div>
<span> span4 </span>
</div>
<p> Click the following button to get the last span element. </p>
<button> Click me </button>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -

After clicking the given button, the output will be -

Example2

In this example, we are using the last() method to get the last paragraph element from the set of elements. We are using the p as the selector, so the method will return the last paragraph element.

<html>

<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
$(document).ready(function() {
$("button").click(function(){
$("p").last().css("background-color", "yellow");
});
});
</script>
</head>

<body id = "main">

<h2> It is an example of using the last() method. </h2>
<div style = "border: 1px solid blue;">
div element
</div>
<p style = "border: 1px solid blue;">
This is a paragraph
</p>
<p style = "border: 1px solid blue;">
Second paragraph element
</p>

<h3 style = "border: 1px solid blue;">
Heading h3
</h3>
<p style = "border: 1px solid blue;">
Another paragraph element
</p>
</br>
<span> Click the following button to get the last paragraph element. </span>
</br> </br>
<button> Click me </button>
</body>

</html>

Test it Now

Output

After the execution of the above code, the output will be -