jQuery :even Selector

Posted in jQuery Tutorial

Updated on Apr 11, 2024

By Mari Selvan

👁️ 21 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

jQuery provides a plethora of selectors to manipulate and interact with HTML elements effortlessly. Among these selectors, the :even selector stands out as a powerful tool for targeting elements based on their index within a selection.

In this comprehensive guide, we'll explore the usage of the jQuery :even selector with detailed examples to help you harness its potential in your web development projects.

🧠 Understanding :even Selector

The :even selector allows you to select elements with an even index within a set of matched elements. This can be particularly useful when you want to apply styles or perform actions on alternate elements or specific patterns within a list or group of elements.

💡 Syntax

The syntax for the :even selector is straightforward:

syntax.js

Copied

$("selector:even")

📝 Example

Selecting Even-indexed Elements:

Consider a scenario where you have a list of elements, and you want to select and apply styles to elements with even indices:
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
```
$("li:even").css("color", "blue");
```
This code will change the text color of elements with even indices (Item 2 and Item 4) to blue.
Alternating Background Colors:

You can use the :even selector to create alternating background colors for table rows or 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
```
li:nth-child(even) {
  background-color: lightgray;
}
```
This CSS rule will set a light gray background color for list items with even indices.
Applying Styles to Even-numbered Inputs:

Suppose you have a form with input fields, and you want to style the input fields with even indices:
index.html
Copied
```
<input type="text">
<input type="text">
<input type="text">
<input type="text">
```
example.js
Copied
```
$("input:text:even").css("border-color", "green");
```
This code will change the border color of input fields with even indices to green.
Combining with Other Selectors:

You can combine the :even selector with other jQuery selectors to target specific elements more precisely. For example, you can select even-indexed checkboxes within a form:
example.js
Copied
```
$("form input[type='checkbox']:even").prop("checked", true);
```
This code will check every even-indexed checkbox within a form.

🎉 Conclusion

The jQuery :even selector is a versatile tool for targeting elements based on their position within a selection. Whether you need to style alternate elements, apply patterns to a list, or perform actions on specific indices, this selector provides an efficient solution.

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