jQuery even() Method
Last Updated :
19 Jul, 2024
Improve
The even() method in jQuery is used to select the even indexed elements from the selected elements.
Syntax:
$(selector).even()Return Value: It returns the even indexed elements.
Example 1: This example selects the even indexed list elements.
<!DOCTYPE HTML>
<html>
<head>
<title>
jQuery even() method
</title>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
<style>
li {
width: 150px;
margin: 0 auto;
}
.highlight {
background-color: green;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"></p>
<ul>
<li>GFG_0</li>
<li>GFG_1</li>
<li>GFG_2</li>
<li>GFG_3</li>
<li>GFG_4</li>
</ul>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN"></p>
<script>
var elUp = document.getElementById("GFG_UP");
var elDown = document.getElementById("GFG_DOWN");
elUp.innerHTML = "JQuery | even() method";
function Geeks() {
$("ul li").even().addClass("highlight");
elDown.innerHTML =
"The even elements are highlighted";
}
</script>
</body>
</html>
Output:
-method.gif)
Example 2: This example checked the even indexed checkboxes.
<!DOCTYPE HTML>
<html>
<head>
<title>
jQuery even() method
</title>
<script src=
"https://code.jquery.com/jquery-3.5.0.js">
</script>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<p id="GFG_UP"></p>
GFG_0: <input type="checkbox"
id="GFG_0" value="GFG_0"><br>
GFG_1: <input type="checkbox"
id="GFG_1" value="GFG_1"><br>
GFG_2: <input type="checkbox"
id="GFG_2" value="GFG_2"><br>
GFG_3: <input type="checkbox"
id="GFG_3" value="GFG_3"><br>
GFG_4: <input type="checkbox"
id="GFG_4" value="GFG_4">
<br><br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN"></p>
<script>
var elUp = document.getElementById("GFG_UP");
var elDown = document.getElementById("GFG_DOWN");
elUp.innerHTML = "JQuery | even() method";
function Geeks() {
$("input").even().attr("checked", true);
elDown.innerHTML =
"The even elements are checked";
}
</script>
</body>
</html>
Output:
-method---2.gif)
