jQuery - Select odd indexed elements

Select odd indexed elements in jQuery

In this tutorial, you will learn how to select the odd indexed elements of the selection, using jQuery.

Solution

To select the odd indexed of the elements with given selector using jQuery, you can use the element selector in combination with the :odd pseudo-selector.

var elements = $("someselector:odd");

where you can replace the someselector with whatever selector required. For example, if you would like to the odd indexed elements of the paragraphs in the document, you can use the "p:odd" selector.

Odd indexed selects the elements with index=1,3,5,7,…

Programs

1. In the following script, when user clicks on the button, we select the odd 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 odd indexed elements
          var elements = $("p:odd");
    
          // 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