jQuery .even() Method

What You’ll Learn

The .even() traversing method keeps elements at even zero-based indexes — 0, 2, 4 — from the current jQuery collection. This tutorial covers the official list highlight demos, zebra-striping patterns, comparison with .odd() and the :even selector, and clarifies the difference from CSS :nth-child(even).

Introduction

Alternating styles — zebra-striped table rows, every other list item highlighted — are common UI patterns. Instead of looping with an index check, jQuery provides .even() to select every element at an even position in the current collection.

Added in jQuery 3.5, .even() takes no arguments and returns a new jQuery object containing elements at indexes 0, 2, 4, and so on. Counting is zero-based — the first element is index 0, which counts as “even.”

Understanding the .even() Method

Given a jQuery object with one or more matched elements, .even() filters the collection to those whose zero-based index is even (index % 2 === 0). The index is position within the jQuery object — in document order for a simple $("li") query, but relative to whatever set you have after prior filtering.

Pair .even() with .odd() to style alternating groups. For legacy jQuery before 3.5, use .filter(":even") instead — it follows the same zero-based index rule.

📝 Syntax

General form of .even:

.even()

Parameters

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

Return value

• A new jQuery object containing elements at even zero-based indexes (0, 2, 4…) from the original set.

Official jQuery API list example

$( "li" ).even().css( "background-color", "red" );
// Indexes 0, 2, 4 → list items 1, 3, 5

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" ).even().css( "background-color", "red" );

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

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

Even-index li elements → yellow highlight class
Odd-index items → default styling

var $items = $( "#striped li" );

$items.even().css( "background-color", "#e8f4fc" );
$items.odd().css( "background-color", "#fff" );

Indexes 0,2,4 → light blue
Indexes 1,3 → white
Full zebra striping effect

$( "#data-table tbody tr" )
  .even()
  .addClass( "row-even" );

Rows at indexes 0, 2, 4 → shaded
Improves scanability of tabular data

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

// Only .active items; then even indexes among those

Among .active items only: indexes 0, 2… → bold
Index resets relative to filtered subset

🚀 Common Use Cases

• Zebra table rows — shade every other row for readability.
• Alternating list styles — different backgrounds on even-index items.
• Carousel indicators — style even-positioned dots or thumbnails.
• Grid layouts — highlight even cells in a flattened node list.
• Split A/B styling — pair .even() and .odd() for two visual groups.
• Post-filter striping — stripe only visible items after a search filter.

📝 Notes

• Added in jQuery 3.5 — requires jQuery 3.5+; use .filter(":even") on older versions.
• Zero-based indexing — index 0 is the first element and counts as even.
• Index is relative to the current jQuery collection, not global DOM order after filtering.
• Does not modify the DOM — only narrows which elements the jQuery object refers to.
• Complements .odd() — together they cover all indexes without overlap.
• Not equivalent to CSS :nth-child(even), which uses sibling-based 1-based counting.

💡 Best Practices