jQuery :odd Selector

Posted in jQuery Tutorial

Updated on Nov 21, 2024

By Mari Selvan

👁️ 32 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

In the realm of jQuery, selectors play a crucial role in targeting specific elements within a document. One such selector is :odd, which allows you to select elements with odd indices within a matched set. Understanding and leveraging the :odd selector can streamline your development process and enhance the interactivity of your web pages.

This guide aims to explore the functionality of the jQuery :odd selector through comprehensive examples and explanations.

🧠 Understanding :odd Selector

The :odd selector targets elements with odd indices within a set of matched elements. It is particularly useful when you want to style or manipulate every other element in a collection, such as alternating rows in a table or a series of list items.

💡 Syntax

The syntax for the :odd selector is straightforward:

syntax.js

Copied

$(":odd")

📝 Example

Styling Odd Rows in a Table:

Consider a table where you want to apply a different background color to every other row. You can achieve this effortlessly using the :odd selector:
index.html
Copied
```
<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>
 <tr><td>Row 5</td></tr>
</table>
```
example.js
Copied
```
$("table tr:odd").css("background-color", "lightgray");
```
This will set the background color of odd rows in the table to light gray.
Selecting Odd List Items:

Suppose you have an unordered list and you want to select and manipulate only the odd-numbered list items:
index.html
Copied
```
<ul>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
 <li>Item 4</li>
 <li>Item 5</li>
</ul>
```
example.js
Copied
```
$("ul li:odd").css("font-weight", "bold");
```
This will make the text of odd-numbered list items bold.
Alternating Styles for Elements:

You can apply alternating styles to any set of elements using the :odd selector. For instance, let's change the text color of odd paragraphs:
index.html
Copied
```
Paragraph 1
Paragraph 2
Paragraph 3
Paragraph 4
Paragraph 5
```
example.js
Copied
```
$("p:odd").css("color", "blue");
```
This will set the text color of odd paragraphs to blue.
Combining :odd Selector with Other Selectors:

You can combine the :odd selector with other selectors to narrow down your selection. For example, to target odd paragraphs within a specific class:
example.js
Copied
```
$(".special-class p:odd").css("font-style", "italic");
```
This will make the text of odd paragraphs within elements with the class special-class italic.

🎉 Conclusion

The jQuery :odd selector provides a convenient way to target and manipulate elements with odd indices within a set of matched elements. Whether you need to style alternating rows in a table, select specific list items, or apply alternating styles to any set of elements, this selector offers a straightforward solution.

By mastering its usage, you can enhance the visual appeal and interactivity of your web pages effortlessly.