jQuery - Select even indexed elements

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>

JavaScript Code