jQuery / Selector / :even - Elemente mit geradem Index auswählen

jQuerys :even wählt die Indizes 0, 2 und 4 der Treffermenge, also das erste, dritte und fünfte Element. Seit jQuery 3.4 ist der Selektor veraltet; für neuen Code eignet sich .even() mit derselben Auswahl. CSS :nth-child(even) zählt eine andere Menge und beginnt bei einer anderen Zahl.

Versionen und Bedeutung von :even und .even()

Die :even-Dokumentation beschreibt gerade Indizes ab null und die Einstufung als veraltet seit 3.4. Der Ersatz .even() wurde in jQuery 3.5 eingeführt. Nur die Syntax zu ersetzen, während die Seite noch eine alte 1.x-Datei lädt, reicht deshalb nicht. Prüfen Sie die tatsächlich geladene Version.

Die Beispiele wurden im Windows-Browser mit jQuery 3.7.1 und 4.0.0 ausgeführt. :even funktionierte in beiden geprüften Versionen. Veraltet bedeutet nicht bereits entfernt; verwenden Sie beim Schreiben und Überarbeiten trotzdem die empfohlene Alternative.

Gerade Indizes sind keine geraden Kindpositionen

In einer Liste mit ausschließlich li-Geschwistern können .even() und :nth-child(odd) dasselbe Ergebnis liefern. Über mehrere Listen hinweg zählt .even() jedoch die gesamte gemeinsame Auswahl. :nth-child() beginnt bei jedem Elternteil neu und berücksichtigt alle Elementgeschwister, nicht nur den angegebenen Tag.

Vollständiges Beispiel mit zwei Listen

Speichern Sie den vollständigen Code als UTF-8 in even-demo.html und öffnen Sie ihn im Browser. Für die offizielle jQuery-Datei benötigen Sie Internetzugang. Das Beispiel verwendet fest Version 4.0.0 und erfordert keine Paketinstallation. A und B enthalten jeweils drei li-Elemente.

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

Zu Beginn werden A1, A3 und B2 markiert: die Indizes 0, 2 und 4 der sechs Elemente.

a1, a3, b2 | 3

Schaltflächen vergleichen und zurücksetzen

1. Combined .even() zählt beide Listen gemeinsam: a1, a3, b2 | 3.
2. Each list .even() wählt die li-Kinder jeder Liste separat. Der Neustart je Elternteil ergibt a1, a3, b1, b3 | 4.
3. CSS :nth-child(even) wählt jeweils das zweite Kind: a2, b2 | 2.
4. Reset entfernt Markierungen und zeigt none | 0. Elemente werden nicht gelöscht. Combined stellt die ursprüngliche Auswahl wieder her.

show entfernt zuerst die bisherige Markierung und setzt sie nur für die neuen Treffer. Die listenweise Auswahl kombiniert ihre Ergebnisse mit add. Vergleichen Sie Code und Anzeige, um den Unterschied zwischen gemeinsamer und elternbezogener Berechnung zu sehen.

Vorhandenes :even durch .even() ersetzen

Entfernen Sie :even aus dem Selektor und rufen Sie .even() am Ergebnis des verbleibenden Selektors auf. Führen Sie nach dem Öffnen oder nach Combined diesen Teilcode in der Entwicklerkonsole aus. Die ersten beiden Ergebnisse stimmen überein, das dritte verwendet gerade Geschwisterpositionen:

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

Der Wechsel zu :nth-child(even) verändert die Bedeutung und nicht nur die Schreibweise. Entscheiden Sie, ob Streifen bei jedem Elternteil neu beginnen oder über eine gefilterte Treffermenge laufen sollen. :even ist eine jQuery-Erweiterung und kein unverändert in CSS-Stylesheets nutzbarer Selektor.

Filterreihenfolge und spätere Änderungen

Die Klasse keep besitzen A2, A3, B1 und B3. $("#groups li.keep").even() begrenzt zuerst die Menge und wählt A2 und B1. $("#groups li").even().filter(".keep") wählt zuerst gerade Indizes der Gesamtmenge und behält anschließend nur A3. Die Reihenfolge bestimmt somit die Grundlage der Indexberechnung.

Auswahlen aktualisieren sich nicht automatisch. Nach Hinzufügen, Entfernen oder Filtern führen Sie Selektor und .even() erneut aus, wenn die aktuelle Reihenfolge markiert werden soll. Prüfen Sie bei Problemen die Netzwerkanfrage, Konsolenfehler und jQuery.fn.jquery. Achten Sie auch auf mehrfach geladene jQuery-Versionen.