jQuery .last() Method

What You’ll Learn

The .last() traversing method reduces the current jQuery collection to the final element in the set. This tutorial covers the official list highlight demos, compares .last() with .eq(-1) and .first(), and shows how to chain after .filter() and .find().

Introduction

After selecting multiple elements — list items, table rows, pagination links — you often need just the last one. Maybe you want to style the bottom menu item, remove the final row, or focus the last input in a form. The .last() method picks that element in one readable step.

Available since jQuery 1.4 (added alongside .first()), .last() takes no arguments. It constructs a new jQuery object from the final element in the current set. It is shorthand for .eq(-1) — same result, clearer intent when you always want the trailing element.

Understanding the .last() Method

Given a jQuery object representing zero or more DOM elements, .last() returns a new jQuery object containing only the final element in that set. The index is relative to the current collection — not necessarily the last matching node in the entire document.

If the collection is empty, .last() returns an empty jQuery object. If the collection has one element, that element is returned unchanged in a new wrapper. The method does not search the DOM again — it only reads the current jQuery object.

📝 Syntax

General form of .last:

.last()

Parameters

• None — .last() does not accept any arguments.

Return value

• A new jQuery object containing the last element in the current set, or an empty set if there are no matched elements.

Official jQuery API list example

$( "li" ).last().css( "background-color", "red" );
// Red background on list item 5 only

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Use DevTools or the Try-it links to run each snippet in the browser.

$( "li" ).last().css( "background-color", "red" );

list item 5 → red background
Items 1–4 → unchanged

$( "ul li" ).last().addClass( "highlight" );

Last ul li → yellow .highlight class
Earlier items → default styling

$( "#last-demo li" ).last().css( "color", "green" );
$( "#eq-demo li" ).eq( -1 ).css( "color", "green" );

// Identical result — different syntax

.last() and .eq(-1) → both green on item 5
Same jQuery object length (1) after either call

$( "#ends-demo li" ).first().css( "border-top", "3px solid blue" );
$( "#ends-demo li" ).last().css( "border-bottom", "3px solid red" );

// First and last items styled differently

Item 1 → blue top border (.first())
Item 5 → red bottom border (.last())

$( "li" )
  .filter( ".active" )
  .last()
  .css( "font-weight", "bold" );

Last .active item → bold
Other .active items → normal weight

🚀 Common Use Cases

• Style bottom list item — $("ul.menu li").last().addClass("bottom").
• Remove final row — $("tbody tr").last().remove().
• Focus last input — $(".form").find("input").last().focus().
• Append to last panel — $(".panel").last().append(content).
• Last visible tab — $(".tab").filter(":visible").last().
• Pagination next anchor — $(".page-link").last().addClass("current").

📝 Notes

• Available since jQuery 1.4 — no arguments accepted.
• Equivalent to .eq(-1) — shorthand for the final index only.
• Operates on the current jQuery collection — does not re-query the DOM.
• Empty input collection returns empty output — safe to chain.
• Pushes onto jQuery’s internal stack — pair with .end() to restore the previous set.
• For the first element, use .first() or .eq(0) instead.

💡 Best Practices