jQuery / Method / .children() - Direkte Kindelemente auswählen

jQuerys .children() liefert ein neues jQuery-Objekt mit ausschließlich unmittelbaren Kindelementen der Auswahl. Ein Selektor wie .children(".hot") behält passende Kinder. Davon unterscheiden sich .find() für tiefere Nachfahren und .contents() für direkte Kindknoten einschließlich Text und Kommentaren.

Eine Ebene absteigen und Kandidaten filtern

Die Dokumentation zu .children() beschränkt die Suche auf eine Ebene unter jedem Ausgangselement. Ohne Argument werden alle direkten Elementkinder unabhängig vom Tag erfasst. Weder das Ausgangselement selbst noch Enkel innerhalb seiner Kinder gehören automatisch dazu.

Das Argument filtert die gefundenen direkten Kandidaten. .children(".hot") steigt nicht weiter ab, bis die Klasse erscheint. Bei mehreren Ausgangseltern werden deren unmittelbare Kinder gesammelt. Grenzen Sie die Ausgangsauswahl ein, wenn nur eine bestimmte Karte gemeint ist.

Vollständiges Beispiel mit verschachtelter Karte

Speichern Sie alles als UTF-8 in children-demo.html und öffnen Sie die Datei 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. Auswahl, Filter, Hinzufügen, Reset und Vergleichscode wurden mit 3.7.1 und 4.0.0 ausgeführt.

card besitzt drei direkte Elemente: p mit ID title, div mit ID body und button mit ID action. nested liegt innerhalb von body und ist ein Enkel von card. Intro text und ein Kommentar verdeutlichen andere Knotentypen. Auch die Klasse hot auf card selbst macht card nicht zu einem eigenen Kind.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Direct children and deeper descendants</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    #card { border: 2px solid #aaa; padding: 16px; max-width: 600px; }
    #card > * { display: block; padding: 8px; margin: 8px 0; border: 1px solid #ddd; }
    #card .marked { outline: 3px solid #ba6900; background: #fff5d6; }
    button { padding: 8px; margin: 4px; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Direct children and deeper descendants</h1>
  <div id="card" class="hot">
    Intro text
    <!-- A comment is not an element. -->
    <p id="title" class="hot">Direct paragraph</p>
    <div id="body"><p id="nested" class="hot">Nested paragraph</p></div>
    <button type="button" id="action">Direct button</button>
  </div>
  <button type="button" id="all">All direct children</button>
  <button type="button" id="hot">Direct .hot children</button>
  <button type="button" id="deep">All .hot descendants</button>
  <button type="button" id="add">Add direct .hot paragraph</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      function show($chosen) {
        $("#card").find("*").removeClass("marked");
        $chosen.addClass("marked");
        const ids = $chosen.map((_, item) => item.id).get().join(", ");
        $("#result").text(`${ids || "none"} | ${$chosen.length}`);
      }
      function direct() {
        show($("#card").children());
      }
      $("#all").on("click", direct);
      $("#hot").on("click", () => show($("#card").children(".hot")));
      $("#deep").on("click", () => show($("#card").find(".hot")));
      $("#add").on("click", function () {
        if (!$("#extra").length) {
          $("<p>").attr("id", "extra").addClass("hot").text("Added paragraph").appendTo("#card");
        }
        direct();
      });
      $("#reset").on("click", function () {
        $("#extra").remove();
        direct();
      });
      direct();
    });
  </script>
</body>
</html>

Anfangs werden drei direkte Kinder umrandet. Der Hintergrund von body liegt auch hinter dessen Inhalt, doch ausgewählt ist body; nested ist nicht zusätzlich ausgewählt.

title, body, action | 3

1. All direct children zeigt title, body, action | 3.
2. Direct .hot children behält passende direkte Kinder: title | 1.
3. All .hot descendants sucht mit .find() tiefer: title, nested | 2. card selbst bleibt ausgeschlossen.
4. Add direct .hot paragraph ergänzt ein p in card und fragt direkte Kinder erneut ab: title, body, action, extra | 4. Die Prüfung der extra-ID verhindert Duplikate.
5. Danach ergibt Direct .hot children title, extra | 2. Reset entfernt nur extra und stellt die ursprüngliche Auswahl von drei Kindern wieder her.

show entfernt marked von vorherigen Nachfahren, bevor es die neue Menge hervorhebt. Beim Wechsel zwischen direkter und tieferer Auswahl bleiben keine alten Markierungen. Reset ersetzt weder ursprünglichen Inhalt noch Button.

.find() und .contents() vergleichen

Führen Sie nach Reset diesen Teilcode in der Entwicklerkonsole aus. Jede Zeile zeigt die ausgewählten Element-IDs.

const ids = $set => $set.map((_, item) => item.id).get().join(", ");
console.log(ids($("#card").children()));
console.log(ids($("#card").children(".hot")));
console.log(ids($("#card").find(".hot")));

title, body, action
title
title, nested

.find() durchsucht mehrere Nachfahrenebenen; .children() steigt einmal ab. Genau zwei Ebenen lassen sich mit $("#card").children().children(".hot") ablaufen. Hier liefert das nur nested; ein zusätzlicher Zwischenwrapper ändert das Ergebnis.

.contents() erfasst direkte Knoten samt Text und Kommentaren. Knoten bilden das Document Object Model (DOM) und umfassen neben Elementen auch Text und Kommentare. Elementoperationen für Klassen und Stile gelten dafür nicht gleichermaßen; behandeln Sie nicht jeden Knoten als Element.

Leere Ergebnisse, Zeitpunkt und Struktur prüfen

Fehlt das Ausgangselement oder besitzt es keine Elementkinder, bleibt das Ergebnis leer. action enthält nur Text: .children() ist leer, ohne dass der Text verschwunden wäre. Prüfen Sie bei fehlenden Treffern Zwischenwrapper wie div oder ul und ob die Klasse auf Elternteil, Kind oder Enkel liegt.

Auswahlen aktualisieren sich nicht automatisch. Eine gespeicherte Menge von drei Kindern behält ihre Länge nach dem Hinzufügen eines p. Fragen Sie für aktuelle Kinder wie direct erneut ab. Kontrollieren Sie bei fehlender Reaktion jQuery in Network und Fehler in Console; wählen Sie asynchronen Inhalt erst nach dem Einfügen aus.