Select even indexed elements in jQuery
In this tutorial, you will learn how to select the even indexed elements of the selection, using jQuery.
Solution
To select the even indexed of the elements with given selector using jQuery, you can use the element selector in combination with the :even
pseudo-selector.
var elements = $("someselector:even");
where you can replace the someselector
with whatever selector required. For example, if you would like to the even indexed elements of the paragraphs in the document, you can use the "p:even"
selector.
Even indexed selects the elements with index=0,2,4,6,8,…
Programs
1. In the following script, when user clicks on the button, we select the even indexed paragraph elements in the document, and change their color to red.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#action").click(function() {
// Select the even indexed elements
var elements = $("p:even");
// Do something with the selected elements
elements.css("color", "red");
});
});
</script>
</head>
<body>
<h2>Hello User!</h2>
<input type="submit" id="action" value="Click Me"></input>
<p>This is a paragraph.</p>
<p>This is second paragraph.</p>
<p>This is third paragraph.</p>
<p>This is fourth paragraph.</p>
<h2>Another section</h3>
<p>This is fifth paragraph.</p>
</body>
</html>