jQuery / Selector / :nth-child() - Geschwisterpositionen mit an+b auswählen

jQuerys :nth-child(an+b) wählt Elementgeschwister an Positionen einer Formel, beginnend bei eins und für jeden Elternknoten getrennt. p:nth-child(2) bedeutet ein p, das zweites Elementkind ist, nicht das zweite p. Für das zweite gleichartige Geschwister dient :nth-of-type(2); für das zweite Element einer vorhandenen Auswahl .eq(1).

Ab eins zählen und andere Tags berücksichtigen

Die Dokumentation zu :nth-child() folgt den CSS-Regeln für Geschwisterpositionen. Die Zählung beginnt bei jedem Elternteil neu und berücksichtigt auch andere Tags. Leerraumtext und Kommentare sind keine Elemente. Versteckte Elemente belegen weiterhin Positionen, solange sie in der Dokumentstruktur bleiben; die sichtbare Reihenfolge genügt deshalb nicht.

Bei h2, p, p bleibt p:nth-child(1) leer, während p:nth-child(2) das erste p trifft. p-Elemente werden nicht zuerst gesammelt und anschließend nummeriert. Begrenzen Sie den Bereich wie im Beispiel mit > auf direkte Kinder.

an+b und gebräuchliche Formeln

In der CSS-Definition von an+b sind a und b ganze Zahlen; n nimmt nichtnegative ganze Werte wie 0, 1 und 2 an. Nur positive Ergebnispositionen passen. Null und negative Positionen wählen nichts aus. -n+3 liefert 3, 2, 1 und bezeichnet die ersten drei Elementpositionen, ohne vom Ende rückwärts zu zählen.

Ein vorangestelltes p lässt nur p-Elemente an diesen Positionen übrig. Ist das vierte Kind span, schließt p:nth-child(2n) es aus, überspringt es aber nicht, um ein späteres p als viertes neu zu zählen.

Vollständiges Beispiel mit gemischten Tags

Speichern Sie den gesamten Code als UTF-8 in nth-child-demo.html und öffnen Sie ihn im Browser. Keine Installation ist nötig, aber Internet zum Laden der offiziellen jQuery-Datei über das Content Delivery Network (CDN). Der Code verwendet 4.0.0; Formeln, Einfügen, Reset und Vergleichscode wurden mit 3.7.1 und 4.0.0 ausgeführt.

A enthält h2, p, p, span, p; B enthält h2, p, p, p. Das Ergebnis zeigt die p-IDs zum Abgleich mit den Tagpositionen.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sibling positions and formulas</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    .group { border: 1px solid #aaa; padding: 12px; margin: 12px 0; }
    .group > * { display: block; margin: 6px 0; padding: 6px; }
    .group > .marked { background: #fff0b3; outline: 2px solid #b56b00; }
    button, select { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Sibling positions and formulas</h1>
  <div id="groups">
    <section class="group" id="group-a">
      <h2>A heading</h2>
      <p id="a1">A paragraph 1</p>
      <p id="a2">A paragraph 2</p>
      <span>A note</span>
      <p id="a3">A paragraph 3</p>
    </section>
    <section class="group" id="group-b">
      <h2>B heading</h2>
      <p id="b1">B paragraph 1</p>
      <p id="b2">B paragraph 2</p>
      <p id="b3">B paragraph 3</p>
    </section>
  </div>
  <label for="rule">Formula:</label>
  <select id="rule">
    <option value="2">2</option>
    <option value="2n">2n (even)</option>
    <option value="2n+1">2n+1 (odd)</option>
    <option value="3n+1">3n+1</option>
    <option value="-n+3">-n+3</option>
  </select>
  <button type="button" id="prepend">Prepend notice to A</button>
  <button type="button" id="reset">Reset</button>
  <output id="result" aria-live="polite"></output>
  <script>
    $(function () {
      function refresh() {
        $("#groups > .group > p").removeClass("marked");
        const rule = $("#rule").val();
        const $chosen = $("#groups > .group > p:nth-child(" + rule + ")");
        $chosen.addClass("marked");
        const ids = $chosen.map((_, item) => item.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$chosen.length}`);
      }
      $("#rule").on("change", refresh);
      $("#prepend").on("click", function () {
        if (!$("#extra").length) {
          $("#group-a").prepend('<div id="extra">Notice</div>');
        }
        refresh();
      });
      $("#reset").on("click", function () {
        $("#extra").remove();
        $("#rule").val("2");
        refresh();
      });
      refresh();
    });
  </script>
</body>
</html>

Anfangs gilt die Formel 2. Das zweite Element jeder Gruppe ist ihr erstes p; a1 und b1 werden markiert:

a1, b1 | 2

1. 2n ergibt a1, b1, b3 | 3. As viertes Element span erfüllt p nicht.
2. 2n+1 ergibt a2, a3, b2 | 3. Das erste h2 ist ausgeschlossen.
3. 3n+1 ergibt b3 | 1. As erste und vierte Kinder sind h2 und span; nur Bs viertes ist p.
4. -n+3 ergibt a1, a2, b1, b2 | 4: p unter den ersten drei Elementkindern jedes Elternteils.
5. Drücken Sie Reset, dann Prepend notice to A. Ein neues führendes div macht As zweites Kind zu h2; Formel 2 liefert nur noch b1 | 1. Wiederholtes Klicken erzeugt keine Duplikate.
6. Reset entfernt nur das zusätzliche div, setzt Formel 2 und fragt erneut ab. Ursprünglicher Inhalt und a1, b1 | 2 kehren zurück.

:nth-of-type() und .eq() vergleichen

Führen Sie nach Reset diesen Teilcode in der Entwicklerkonsole aus. :nth-of-type() zählt Geschwister desselben Tags; .eq() zählt die vorhandene Auswahl ab null.

const ids = $set => $set.map((_, item) => item.id).get().join(", ");
console.log(ids($("#groups > .group > p:nth-child(2)")));
console.log(ids($("#groups > .group > p:nth-of-type(2)")));
console.log(ids($("#groups > .group > p").eq(1)));

a1, b1
a2, b2
a2

Die erste Zeile liefert a1 und b1 als zweite Elementkinder mit Tag p. Die zweite liefert a2 und b2 als zweite p je Elternteil. Die letzte liefert nur a2 an Index 1 der gesamten p-Auswahl. Negative .eq()-Indizes zählen vom Ende dieser Menge und unterscheiden sich von -n+3.

Dynamische Dokumente und unerwartete Ergebnisse

Auswahlen aktualisieren sich bei Dokumentänderungen nicht automatisch. Eine vor dem Einfügen gespeicherte Menge mit a1 und b1 behält diese Elemente. Fragen Sie wie refresh erneut ab und entfernen Sie alte Markierungen, wenn aktuelle Geschwisterpositionen zählen sollen.

Prüfen Sie bei leeren Ergebnissen null oder nicht vorhandene Positionen, den tatsächlichen Tag sowie eingeschobene Überschriften, Hinweise oder versteckte Elemente. Bei Tabellen helfen die tatsächlichen Zwischeneltern wie tbody im Document Object Model (DOM). Reagiert nichts, kontrollieren Sie zuerst jQuery in Network und Fehler in Console.