jQuery :even Selector

Quiz

The :even selector in jQuery is used to select elements with an even index within a set of matched elements. The indexing is zero-based, meaning the first element has an index of 0, the second an index of 1, and so on.

Note: If we want to select the elements with odd index numbers, we need to use the :odd selector.

Syntax

Following is the syntax for jQuery :even selector −

$("selector:even")

Parameters

Following is the explantion of above syntax −

selector: This is a CSS selector. It specifies the criteria for selecting elements. For example:
"div" selects all <div> elements.
".class" selects all elements with the class "class".
"#id" selects the element with the id "id".
even: Filters the matched set to include only elements with an even index.

Example 1

In the following example, we are using the :even selector to select the even indexed list items −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
        $("button").click(function(){
            $("li:even").css("background-color", "yellow");
        })
    });
</script>
</head>
<body>
<ul>
  <li>Even (index: 0)</li>
  <li>Odd (index: 1)</li>
  <li>Even (index: 2)</li>
  <li>Odd (index: 3)</li>
  <li>Even (index: 4)</li>
</ul>
<button>Click</button>
</body>
</html>

After clicking the button, the even indexed list items will be highlighted with yellow background color.

Example 2

In this example, we are hiding the even-indexed <div> elements using the ":even" selector −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $(document).ready(function() {
      $("button").click(function(){
        $("div:even").hide();
      })
    });
  </script>
</head>
<body>
<div>Even Div (Index: 0)</div>
<div>Odd Div (Index: 1)</div>
<div>Even Div (Index: 2)</div>
<div>Odd Div (Index: 3)</div>
<div>Even Div (Index: 4)</div>
<button>Click</button>
</body>
</html>

When we click the button, all the even-indexed div elements will be hidden.

jquery_ref_selectors.htm

Print Page