jQuery / Selector / :even - Select Even-Indexed Elements

jQuery's :even selects indexes 0, 2 and 4 in the matched set: the first, third and fifth elements. It has been deprecated since jQuery 3.4, so use .even() for the same selection in new code. CSS :nth-child(even) counts a different set and starts from a different number.

Versions and the meaning of :even and .even()

The :even documentation describes zero-based even indexes and the deprecation in 3.4. Its replacement, the .even() method, was added in jQuery 3.5. Replacing only the syntax while still loading an old jQuery 1.x file will not provide that method. Check which version the page actually loads.

This article's examples were run in a Windows browser with jQuery 3.7.1 and 4.0.0. :even worked in both tested versions. Deprecation does not mean that an API has already been removed; nevertheless, use the recommended alternative when writing or updating code.

Even indexes are not even-numbered children

With one list containing only li siblings, .even() and :nth-child(odd) can produce the same result. Selecting li elements across multiple lists changes that: .even() counts across the combined selection. :nth-child() restarts for each parent and counts all element siblings, not only siblings matching the tag in your selector.

Complete example comparing two lists

Save the entire code as UTF-8 in even-demo.html and open it in a browser. An internet connection is needed to load the official jQuery distribution. The example pins version 4.0.0 and requires no package installation. Lists A and B each have three li elements.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Even indexes and sibling positions</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .items { padding: 0; list-style: none; }
    .items li { padding: 8px 14px; border: 1px solid #ddd; }
    .marked { background: #fff0b3; }
    button { margin: 4px; padding: 8px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Even indexes and sibling positions</h1>
  <div id="groups">
    <ul class="items"><li id="a1">A1</li><li id="a2" class="keep">A2</li><li id="a3" class="keep">A3</li></ul>
    <ul class="items"><li id="b1" class="keep">B1</li><li id="b2">B2</li><li id="b3" class="keep">B3</li></ul>
  </div>
  <button type="button" id="combined">Combined .even()</button>
  <button type="button" id="per-parent">Each list .even()</button>
  <button type="button" id="css-even">CSS :nth-child(even)</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      function show($chosen) {
        $("#groups li").removeClass("marked");
        $chosen.addClass("marked");
        const ids = $chosen.map((_, item) => item.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$chosen.length}`);
      }
      $("#combined").on("click", () => show($("#groups li").even()));
      $("#per-parent").on("click", function () {
        let $chosen = $();
        $(".items").each(function () {
          $chosen = $chosen.add($(this).children("li").even());
        });
        show($chosen);
      });
      $("#css-even").on("click", () => show($("#groups li:nth-child(even)")));
      $("#reset").on("click", () => show($()));
      show($("#groups li").even());
    });
  </script>
</body>
</html>

Initially, A1, A3 and B2 are highlighted: they have indexes 0, 2 and 4 in the combined six-element set.

a1, a3, b2 | 3

Compare the controls and reset the display

1. Combined .even() counts both lists together and produces a1, a3, b2 | 3.
2. Each list .even() selects each list's li children separately. Counting restarts per parent, producing a1, a3, b1, b3 | 4.
3. CSS :nth-child(even) selects the second child in each list, producing a2, b2 | 2.
4. Reset removes highlights and displays none | 0. It does not delete items. Press Combined again to restore the initial result.

show removes the previous highlight class before marking the new result. The per-list handler combines the results with add. Compare the code and display to see whether indexing happens across the whole selection or separately within each parent.

Migrate existing :even code to .even()

Remove :even from the selector and call .even() on the jQuery object produced by the remaining selector. After opening the example or pressing Combined, run this partial code in the developer Console. The first two results agree; the third selects even-numbered siblings.

const ids = $set => $set.map((_, item) => item.id).get().join(", ");
console.log(ids($("#groups li:even")));
console.log(ids($("#groups li").even()));
console.log(ids($("#groups li:nth-child(even)")));

a1, a3, b2
a1, a3, b2
a2, b2

Changing .even() to :nth-child(even) changes the meaning, not just the syntax. Decide whether stripes should restart within each parent or alternate across a filtered search result. :even is a jQuery extension, so it is not a selector to use unchanged in a CSS stylesheet.

Filtering order and later document changes

The keep class is on A2, A3, B1 and B3. $("#groups li.keep").even() narrows the set first and selects A2 and B1. Conversely, $("#groups li").even().filter(".keep") takes even indexes from the full set before retaining keep elements, leaving only A3. Moving a step changes the set whose indexes are calculated.

Selections do not refresh themselves. After adding or removing items or changing a filter, rerun the selector and .even() to highlight the current order. If nothing happens, check the jQuery request in Network, errors in Console and the value of jQuery.fn.jquery. Also check whether the page loads multiple jQuery versions.