jQuery / Selector / :even - Sélectionner les éléments d’indice pair

Le sélecteur jQuery :even choisit les indices 0, 2 et 4 de l’ensemble sélectionné : les premier, troisième et cinquième éléments. Il est déprécié depuis jQuery 3.4 ; utilisez .even() pour la même sélection dans un nouveau code. CSS :nth-child(even) compte un autre ensemble et commence à un autre nombre.

Versions et principe de :even et .even()

La documentation de :even décrit les indices pairs à partir de zéro et la dépréciation en 3.4. Son remplacement, la méthode .even(), a été ajouté en 3.5. Modifier seulement la syntaxe en conservant un ancien fichier jQuery 1.x ne suffit donc pas. Vérifiez la version effectivement chargée.

Les exemples ont été exécutés dans un navigateur Windows avec jQuery 3.7.1 et 4.0.0. :even fonctionnait dans les deux versions testées. Déprécié ne signifie pas déjà supprimé ; privilégiez néanmoins la solution recommandée lorsque vous créez ou actualisez du code.

Indice pair et enfant de rang pair diffèrent

Dans une liste composée uniquement de li frères, .even() et :nth-child(odd) peuvent donner le même résultat. Sur plusieurs listes, .even() compte toutefois l’ensemble réuni. :nth-child() recommence pour chaque parent et compte tous les éléments frères, pas seulement ceux du type indiqué.

Exemple complet avec deux listes

Enregistrez tout le code en UTF-8 dans even-demo.html et ouvrez-le dans un navigateur. Une connexion est nécessaire pour charger la distribution officielle de jQuery. L’exemple fixe la version 4.0.0 et ne nécessite pas d’installation de paquet. A et B comportent chacun trois li.

<!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>

Au départ, A1, A3 et B2 sont surlignés : ils occupent les indices 0, 2 et 4 de l’ensemble de six éléments.

a1, a3, b2 | 3

Comparer les boutons puis réinitialiser

1. Combined .even() compte les deux listes ensemble : a1, a3, b2 | 3.
2. Each list .even() sélectionne séparément les li enfants de chaque liste. Le comptage reprend par parent : a1, a3, b1, b3 | 4.
3. CSS :nth-child(even) choisit le deuxième enfant de chaque liste : a2, b2 | 2.
4. Reset retire les marques et affiche none | 0 sans supprimer les éléments. Combined rétablit le résultat initial.

show retire l’ancienne classe de surlignage avant de marquer le nouveau résultat. La sélection par liste réunit ses résultats avec add. Comparez le code et l’affichage pour comprendre si les indices concernent l’ensemble ou chaque parent séparément.

Remplacer :even par .even()

Retirez :even du sélecteur, puis appelez .even() sur l’objet jQuery obtenu. Après l’ouverture ou après Combined, exécutez ce code partiel dans la console de développement. Les deux premiers résultats correspondent ; le troisième choisit les enfants de rang pair :

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

Passer à :nth-child(even) change le sens, pas seulement la syntaxe. Déterminez si les bandes doivent repartir à chaque parent ou alterner dans un résultat de recherche filtré. :even est une extension jQuery, pas un sélecteur utilisable tel quel dans une feuille CSS.

Ordre des filtres et modifications du document

La classe keep appartient à A2, A3, B1 et B3. $("#groups li.keep").even() filtre d’abord puis choisit A2 et B1. À l’inverse, $("#groups li").even().filter(".keep") prend les indices pairs de l’ensemble puis conserve keep, soit A3 uniquement. L’ordre des opérations change l’ensemble sur lequel les indices sont calculés.

Une sélection ne se met pas à jour automatiquement. Après ajout, suppression ou changement de filtre, relancez le sélecteur et .even() pour refléter l’ordre actuel. En cas de problème, vérifiez la requête dans Network, les erreurs de Console et jQuery.fn.jquery. Recherchez aussi un chargement de plusieurs versions de jQuery.