jQuery .even() Method

Posted in jQuery Tutorial

Updated on May 12, 2024

By Mari Selvan

👁️ 14 - Views

⏳ 4 mins

💬 0

Photo Credit to CodeToFun

🙋 Introduction

jQuery offers a plethora of methods to simplify DOM manipulation and traversal, empowering developers to create dynamic and interactive web experiences. Among these methods is .even(), which facilitates the selection of even-indexed elements from a collection. Understanding and utilizing this method can streamline your code and enhance your web development workflow.

In this guide, we'll explore the jQuery .even() method with examples to illustrate its usage and potential benefits.

🧠 Understanding .even() Method

The .even() method in jQuery enables you to filter elements based on their index within a collection. It selects elements at even positions (0-indexed) within the matched set, making it convenient for tasks such as alternating row colors in tables or targeting specific elements in a list.

💡 Syntax

The syntax for the .even() method is straightforward:

syntax.js

Copied

$(selector).even()

📝 Example

Alternating Row Colors in a Table:

Suppose you have a table and you want to apply different background colors to alternating rows. You can achieve this effortlessly using the .even() method:
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
```
$("tr").even().css("background-color", "lightgray");
```
This will set the background color of even-indexed rows to light gray, creating a visually appealing alternating pattern.
Selecting Even-numbered List Items:

If you have an unordered list and you want to target specific items, such as even-numbered ones, you can use the .even() method:
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").even().addClass("highlight");
```
This will add a CSS class named highlight to even-numbered list items, allowing you to style them differently.
Applying Styles to Even-indexed Elements:

You can also apply CSS styles directly to even-indexed elements using the .even() method. For example:
index.html
Copied
```
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
<div class="box">Box 4</div>
<div class="box">Box 5</div>
```
example.js
Copied
```
$(".box").even().css("border", "2px solid blue");
```
This will add a blue border to elements with even indices within the .box class.

🎉 Conclusion

The jQuery .even() method provides a convenient way to target elements at even positions within a collection, simplifying tasks such as styling, selection, and manipulation. By incorporating this method into your jQuery toolkit, you can streamline your code and enhance the interactivity of your web pages with ease.

Experiment with the .even() method in your projects to discover its versatility and unlock new possibilities for efficient DOM traversal and manipulation.