jQuery :even Selector

jQuery | :even Selector: Learn about the jQuery :even Selector with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on November 03, 2022

:even Selector

In jQuery, selectors are a parameter through which we can select the HTML element. Selectors can comprise – class names, ids, tag names, attributes, etc. Basically, by using selectors, the appropriate HTML-DOM element can be selected and hence performed actions on it. Here, we are discussing the jQuery :even Selector.

The jQuery :even selector helps to select the even indexed occurrence of the specified tag. It returns the elements at an even index i.e., 0,2,4,…. It is used along with some tag name prepended to it, generally in a table (<tr>). It selects the even indexed value in the table.

:even Selector Syntax

$('elementName:even');

Once the element is selected, you can access it and perform the actions that you want to perform on it. The example given below shows the selection of the even indexed elements of the table on click by passing the appropriate selector.

jQuery :even Selector Example

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
    <style>
      table{
      border: 2px solid olive;
      }
    </style>
  </head>
  
  <body>
    <h2>jQuery - :even Selector</h2>
    <p>Click the button to Select the even indexed elements of the following table.</p>
    <button>:even Selector</button>
    <hr>
    <table border="2">
      <tr>
        <th>Heading 1</th>
        <th>Heading 2</th>
      </tr>
      <tr>
        <td>Data 1</td>
        <td>Data 2</td>
      </tr>
      <tr>
        <td>Data 3</td>
        <td>Data 4</td>
      </tr>
      <tr>
        <td>Data 5</td>
        <td>Data 6</td>
      </tr>
      <tr>
        <td>Data 7</td>
        <td>Data 8</td>
      </tr>
      <tr>
        <td>Data 9</td>
        <td>Data 10</td>
      </tr>
    </table>
    <hr>
    <h3></h3>
  </body>
  
  <script type="text/javascript">
    $(document).ready(function(){
        $('button').click(function(){
            $('tr:even').css('color','red');
            $('h3').html('Even Indexed Data Highlighted')
        });
    });
  </script>
</html>

Output:

jQuery Multiple .Class Selector

jQuery :odd Selector

Comments and Discussions!

Load comments ↻