jQuery :eq() Selector

What You’ll Learn

The :eq(index) selector picks one element at a zero-based position within the matched set built by the selector before it. Available since jQuery 1.0; negative indices since 1.8; deprecated in jQuery 3.4 in favor of the .eq() method.

Introduction

When you need exactly one element from a group — the third table cell, the second list item in a navigation bar, or the last-but-one row — jQuery’s :eq() pseudo-class filters by position in the current matched set.

Index-related selectors (:eq(), :lt(), :gt(), :even, :odd) always follow another selector. If $(".myclass") returns four elements, they are indexed 0 through 3 for :eq(). Because JavaScript uses 0-based indexing, $(".myclass:eq(1)") selects the second matching element, not the first.

Understanding the :eq() Selector

Think of :eq() as picking a single slot from a numbered list:

• td:eq(0) → first td in the matched set.
• td:eq(2) → third td (official demo — red text).
• li:eq(-1) → last li (since jQuery 1.8).
• li:eq(-2) → second-to-last li (official demo — class foo).
• ul.nav li:eq(1) → one global match at index 1 across all nav items.

📝 Syntax

Official jQuery API forms:

jQuery( ":eq(index)" )        // since 1.0 — zero-based

jQuery( ":eq(-index)" )       // since 1.8 — from end



// typical usage — chain after a selector:

$( "td:eq( 2 )" )

$( "ul.nav li:eq(1)" )

$( "li:eq(-2)" )



// modern replacement (jQuery 3.4+):

$( "td" ).eq( 2 )

Parameters

• index — zero-based position in the matched set (non-negative since 1.0).
• -index — zero-based position counting backwards from the last element (since 1.8).

Return value

• A jQuery object containing at most one element.
• Empty collection when the index is out of range.

Official jQuery API example

// Find the third td (index 2)

$( "td:eq( 2 )" ).css( "color", "red" );

Examples Gallery

Examples 1–3 follow official jQuery demos. Examples 4–5 compare the modern .eq() method and per-container indexing inside .each(). Use the Try-it links to run each snippet.

$( "td:eq( 2 )" ).css( "color", "red" );



// TD #0, #1 unchanged — TD #2 (third cell) turns red

Third td in document order → red text

All other cells → default color

$( "ul.nav li:eq(1)" ).css( "backgroundColor", "#ff0" );



// Only ONE li gets yellow — not every second item

"List 1, item 2" → yellow background

Other five items → unchanged

$( "li:eq(-2)" ).addClass( "foo" );



// Targets "List 2, item 2" when six li elements exist

"List 2, item 2" → foo class (blue on yellow)

Negative index counts from the end of the matched set

// Recommended — pure CSS selector + .eq()

$( ".box" ).eq( 2 ).addClass( "picked" );



// Avoid in new code:

// $( ".box:eq(2)" )

Third .box (index 2) → picked class

Browser can optimize the CSS query step

$( "ul.nav" ).each( function() {

  $( this ).find( "li:eq(1)" ).css( "fontStyle", "italic" );

});



// Contrast — red text on every 2nd child of each ul:

$( "ul.nav li:nth-child(2)" ).css( "color", "red" );

Each ul's 2nd li → italic (via scoped :eq(1))

Both lists' 2nd children → red (via :nth-child(2))

🚀 Common Use Cases

• Table cells — highlight td:eq(2) in a grid row or column slice.
• Navigation — style one item at a fixed index in a flat matched set.
• Last items — use :eq(-1) or :eq(-2) without counting length.
• Per container — combine .each() with scoped :eq(n).
• Legacy code — read and maintain existing :eq() selectors in older jQuery projects.
• Migration — replace :eq(n) with .eq(n) for jQuery 3.4+ codebases.

📝 Notes

• Available since jQuery 1.0; negative indices since 1.8.
• Deprecated in jQuery 3.4 — prefer .eq(index) method on a jQuery collection.
• 0-based indexing — :eq(1) is the second element, not the first.
• Not valid in native querySelectorAll — jQuery extension only.
• Differs from :nth-child(n) — CSS uses 1-based child position per parent.
• Index selectors filter the set from preceding expressions — scope matters.

💡 Best Practices