jQuery / Selector / :even - Seleccionar elementos de índice par

:even de jQuery selecciona los índices 0, 2 y 4 del conjunto encontrado: el primer, tercer y quinto elemento. Está obsoleto desde jQuery 3.4, así que utiliza .even() para la misma selección en código nuevo. CSS :nth-child(even) cuenta un conjunto diferente y empieza en otro número.

Versiones y significado de :even y .even()

La documentación de :even explica los índices pares desde cero y su obsolescencia desde 3.4. El método .even() se añadió en jQuery 3.5. Cambiar solo la sintaxis mientras se carga un archivo antiguo 1.x no proporciona ese método. Comprueba la versión que realmente carga la página.

Los ejemplos se ejecutaron en un navegador Windows con jQuery 3.7.1 y 4.0.0. :even funcionó en ambas versiones comprobadas. Obsoleto no significa que ya se haya eliminado; aun así, utiliza la alternativa recomendada al crear o actualizar código.

Índice par no equivale a hijo de posición par

En una sola lista con únicamente hermanos li, .even() y :nth-child(odd) pueden coincidir. Al seleccionar li de varias listas, .even() cuenta todo el conjunto combinado. :nth-child() reinicia por padre y cuenta todos los elementos hermanos, no solo los de la etiqueta indicada.

Ejemplo completo con dos listas

Guarda todo el código en UTF-8 como even-demo.html y ábrelo en un navegador. Necesitas conexión para cargar la distribución oficial de jQuery. El ejemplo fija la versión 4.0.0 y no requiere instalar paquetes. Las listas A y B tienen tres elementos li cada una.

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

Inicialmente se resaltan A1, A3 y B2, que ocupan los índices 0, 2 y 4 de los seis elementos combinados.

a1, a3, b2 | 3

Comparar los controles y restablecer

1. Combined .even() cuenta las listas juntas y produce a1, a3, b2 | 3.
2. Each list .even() selecciona por separado los hijos li de cada lista. Reiniciar por padre produce a1, a3, b1, b3 | 4.
3. CSS :nth-child(even) selecciona el segundo hijo de cada lista: a2, b2 | 2.
4. Reset elimina las marcas y muestra none | 0, sin borrar elementos. Pulsa Combined para volver al resultado inicial.

show quita el resaltado anterior antes de marcar el resultado nuevo. La selección por lista combina sus resultados con add. Compara código y pantalla para ver si el índice se calcula sobre todo el conjunto o dentro de cada padre.

Migrar de :even a .even()

Quita :even del selector y llama a .even() sobre el objeto jQuery obtenido con el resto. Después de abrir el ejemplo o pulsar Combined, ejecuta este fragmento en la Console de desarrollo. Los dos primeros resultados coinciden; el tercero usa posiciones pares entre hermanos.

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

Cambiar a :nth-child(even) modifica el significado, no solo la sintaxis. Decide si las franjas deben reiniciarse por padre o alternarse sobre resultados filtrados. :even es una extensión de jQuery y no se utiliza directamente como selector de una hoja CSS.

Orden de filtrado y cambios posteriores

A2, A3, B1 y B3 tienen la clase keep. $("#groups li.keep").even() filtra primero y elige A2 y B1. En cambio, $("#groups li").even().filter(".keep") toma índices pares del conjunto completo y después conserva keep, dejando solo A3. El orden modifica el conjunto sobre el que se calculan los índices.

Las selecciones no se actualizan automáticamente. Tras añadir o quitar elementos o cambiar filtros, ejecuta otra vez el selector y .even() para reflejar el orden actual. Si no funciona, comprueba la petición en Network, los errores de Console y jQuery.fn.jquery. Revisa también si se cargan varias versiones de jQuery.