jQuery .odd() Method

What You’ll Learn

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

Introduction

Alternating styles — every other table row, every second list item, striped galleries — are everywhere in UI design. The .odd() method selects elements at odd positions in the current jQuery collection, starting count from zero.

Added in jQuery 3.5 alongside .even(), .odd() takes no arguments. It is the complement of .even(): together they partition any matched set into two non-overlapping groups. Index position is relative to the jQuery object — not the original DOM query — which matters after .filter() or other narrowing steps.

Understanding the .odd() Method

Given a jQuery object representing a set of DOM elements, .odd() constructs a new jQuery object containing only elements whose zero-based index in that set is odd — 1, 3, 5, 7, and so on. Element at index 0 is excluded; index 1 is included.

The jQuery API is explicit: counting starts from zero. In a five-item list, .odd() selects the 2nd and 4th items (indices 1 and 3), not the 1st, 3rd, and 5th. That surprises beginners who expect “odd” to mean 1st, 3rd, 5th in everyday one-based counting — that group is .even() in jQuery’s zero-based system.

📝 Syntax

General form of .odd:

.odd()

Parameters

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

Return value

• A new jQuery object containing elements at odd zero-based indexes in the current set.

Official jQuery API list example

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

// Red on items 2 and 4 — indexes 1 and 3 in zero-based counting

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

Items 2, 4 → red background

Items 1, 3, 5 → unchanged

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

Odd-index li elements → yellow highlight class

Even-index items → default styling

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



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

$items.odd().css( "background-color", "#fff3cd" );

Indexes 0,2,4 → light blue

Indexes 1,3 → light yellow

Full zebra striping effect

$( "#data-table tbody tr" )

  .odd()

  .addClass( "row-odd" );

Rows at indexes 1, 3 → shaded .row-odd

Improves scanability of tabular data

$( "li" )

  .filter( ".active" )

  .odd()

  .css( "font-weight", "bold" );



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

Active items at odd indexes in filtered set → bold

Index count resets relative to .filter() result

🚀 Common Use Cases

• Zebra table rows — $("tbody tr").odd().addClass("alt").
• Alternating list styles — pair .even() and .odd() for two-tone lists.
• Gallery thumbnails — style every other tile in a matched grid collection.
• Split A/B styling — odd group gets one treatment, even group another.
• After narrowing — .filter(".visible").odd() for alternating visible items only.
• Legacy fallback — .filter(":odd") when jQuery < 3.5.

📝 Notes

• Added in jQuery 3.5 — requires jQuery 3.5 or later.
• No arguments — unlike .eq() or .filter().
• Zero-based indexing — index 1 is the second element, not the first.
• Index is relative to the current jQuery collection, not the full DOM query.
• Complements .even() — together they cover all indexes without overlap.
• Not the same as CSS :nth-child(odd) — different counting rules.

💡 Best Practices