jQuery .eq() Method

What You’ll Learn

The .eq() traversing method reduces a jQuery collection to one element at a specified zero-based index — including negative indexes from the end. This tutorial covers the official list-item demos, div selection pattern, out-of-range behavior, and compares .eq() with .get(), .first(), and the :eq() selector.

Introduction

A jQuery selector like $("li") often matches multiple elements. Sometimes you need just one — the third list item, the last tab, the middle slide in a carousel. The .eq() method picks a single element from the current collection by its position.

Available since jQuery 1.1.2 (negative indexes since 1.4), .eq(index) returns a new jQuery object containing only the element at that index. The index is zero-based and refers to the position within the jQuery object — not the element’s rank in the entire DOM document.

Understanding the .eq() Method

Given a jQuery object with zero or more matched elements, .eq(index) constructs a new jQuery object from the element at the specified position. Positive indexes count from the start; negative indexes count from the end (.eq(-1) is the last element).

If no element exists at the given index, jQuery returns an empty collection (.length === 0) — no error is thrown. This makes .eq() safe to chain even when the index might be out of range.

📝 Syntax

General form of .eq:

.eq( index )

Parameters

• index (required) — an integer indicating the 0-based position of the element. A negative integer counts backwards from the last element (since jQuery 1.4).

Return value

• A new jQuery object containing the single element at the given index, or an empty set if the index is out of range.

Official jQuery API list example

$( "li" ).eq( 2 ).css( "background-color", "red" );
// Index 2 → third list item (list item 3)

Examples Gallery

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

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

list item 3 → red background
Items 1, 2, 4, 5 → unchanged

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

list item 4 → red background
.eq(-1) would select item 5 (last)

$( "li" ).eq( 5 ).css( "background-color", "red" );
// 5 items → valid indexes 0–4; eq(5) → empty set, no error

No list items turn red.
.eq(5).length === 0

$( "body" ).find( "div" ).eq( 2 ).addClass( "blue" );

Third div in document order → blue background class
Other divs → unchanged

var $third = $( "li" ).eq( 2 );
var domThird = $( "li" ).get( 2 );

console.log( $third instanceof jQuery );     // true
console.log( $third[ 0 ] === domThird );     // true — same DOM node
console.log( domThird instanceof jQuery );   // false — plain Element

$third.css( "color", "blue" );               // chain jQuery methods
domThird.style.fontWeight = "bold";          // native DOM property

eq(2) → jQuery object (chainable)
get(2) → same DOM node, not wrapped
Third li → blue text, bold weight

🚀 Common Use Cases

• Carousel slides — show or style the slide at a specific index.
• Tab panels — activate .eq(activeIndex) among tab headers or content panes.
• Table rows — highlight the first or last data row with .eq(0) or .eq(-1).
• Pagination — select the current page item from a list of page links.
• After filtering — pick one result from a narrowed .filter() collection.
• Random selection — combine with Math.floor(Math.random() * n) for random picks.

📝 Notes

• Available since jQuery 1.1.2; negative indexes since jQuery 1.4.
• Index is zero-based and relative to the current jQuery collection.
• Out-of-range indexes return an empty jQuery object — no exception.
• .first() equals .eq(0); .last() equals .eq(-1).
• :eq(n) in a selector string is evaluated at query time; .eq(n) filters an existing set.
• Does not modify the DOM — only narrows which elements the jQuery object refers to.

💡 Best Practices