jQuery .last() Method

Posted in jQuery Tutorial

Updated on May 10, 2024

By Mari Selvan

👁️ 15 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a plethora of methods to manipulate HTML elements and traverse the DOM tree efficiently. Among these methods is .last(), which allows you to select the last element of a collection matched by a selector or jQuery object. Understanding and utilizing the .last() method can streamline your development process and enhance the interactivity of your web pages.

In this guide, we'll delve into the functionality of the jQuery .last() method, accompanied by clear examples to illustrate its usage.

🧠 Understanding .last() Method

The .last() method in jQuery is used to select the last element of a matched set of elements. It can be applied to a jQuery object or a collection of DOM elements obtained through a selector.

💡 Syntax

The syntax for the .last() method is straightforward:

syntax.js

Copied

$(selector).last()

📝 Example

Selecting the Last Element:

Suppose you have a list of items and you want to select and manipulate the last item. You can achieve this using the .last() method as follows:
index.html
Copied
```
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
```
example.js
Copied
```
$("li").last().css("font-weight", "bold");
```
This will make the text of the last <li> element bold.
Chaining with Other jQuery Methods:

The .last() method can be seamlessly chained with other jQuery methods to perform various operations. For instance, let's add a class to the last paragraph in a <div> element:
index.html
Copied
```
<div>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
  <p>Paragraph 3</p>
</div>
```
example.js
Copied
```
$("div").find("p").last().addClass("last-paragraph");
```
This will add the class last-paragraph to the last <p> element within the <div>.
Applying Conditional Logic with .last():

You can use the .last() method in conjunction with conditional statements to target specific elements based on certain criteria. For example, let's change the background color of the last visible <div> element:
index.html
Copied
```
<div style="display: none;">Hidden Div 1</div>
<div>Visible Div 1</div>
<div>Visible Div 2</div>
<div style="display: none;">Hidden Div 2</div>
```
example.js
Copied
```
$("div:visible").last().css("background-color", "lightblue");
```
This will set the background color of the last visible <div> element to light blue.

🎉 Conclusion

The jQuery .last() method provides a convenient way to target and manipulate the last element of a selected set of elements. Whether you need to style the last item, chain it with other jQuery methods, or apply conditional logic, the .last() method offers flexibility and efficiency in DOM traversal and manipulation.

By incorporating this method into your development workflow, you can enhance the interactivity and functionality of your web pages effortlessly.