jquery odd

jQuery :odd Selector

The :odd selector in jQuery is used to select elements with an odd index (zero-based) within a matched set. It is commonly used to apply styling or functionality to alternating rows in a table or list.

Basic Usage

To select odd-indexed elements:

$("tr:odd").css("background-color", "#f2f2f2");

This example applies a light gray background to every odd table row (<tr>).

Key Notes

• The index is zero-based, meaning the first element is 0 (considered even), the second is 1 (odd), and so on.
• Works with any jQuery selector (e.g., li:odd, div:odd).
• Often paired with :even for alternating styles.

Example with Table Rows

<table>
  <tr><td>Row 1</td></tr>
  <tr><td>Row 2</td></tr>
  <tr><td>Row 3</td></tr>
  <tr><td>Row 4</td></tr>
</table>
<script>
  $("tr:odd").addClass("highlight");
</script>

This highlights Row 2 and Row 4 (indices 1 and 3).

Alternatives

For modern CSS, consider :nth-child(odd) instead:

tr:nth-child(odd) { background-color: #f2f2f2; }

This achieves the same effect without JavaScript.

The :odd selector is useful for dynamic styling but may be replaced by CSS in simpler cases.