jQuery / Property / .length - Ausgewählte Elemente zählen

jQuerys .length ist eine numerische Eigenschaft für die Anzahl der Elemente in einem jQuery-Objekt. Lesen Sie sie ohne Klammern, etwa $("#tasks > li").length; ohne Treffer ist sie null. Fragen Sie nach Hinzufügen oder Entfernen erneut ab, wenn die aktuelle Anzahl im Dokument zählt.

Anzahl und Existenz prüfen

Die Dokumentation zu .length betrifft eine ausgewählte Menge, weder ihren Text noch die Kinder eines Elements. Versteckte Elemente zählen mit, wenn sie den Selektor erfüllen. Engere Bedingungen liefern die Anzahl der jeweiligen Teilmenge.

if ($("#missing-item")) prüft keine Existenz. Auch ohne Treffer entsteht ein jQuery-Objekt, das selbst als wahr gilt. Vergleichen Sie .length mit null. Die Eigenschaft ist keine Funktion: .length() verursacht TypeError.

Vollständiges Beispiel mit Hinzufügen und Entfernen

Speichern Sie alles als UTF-8 in length-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; Anzahl, Existenz, Hinzufügen, Entfernen und Reset wurden mit 3.7.1 und 4.0.0 ausgeführt.

Die Liste beginnt mit Alpha und Beta. CSS versteckt Beta, doch das Element bleibt im Dokument und trägt done. current zählt die neue Auswahl, completed deren done-Elemente und saved die beim Start gespeicherte Menge.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Count selected list elements</title>
  <style>
    body { font: 16px/1.6 sans-serif; margin: 24px; }
    li { padding: 8px; border-bottom: 1px solid #ddd; }
    .is-hidden { display: none; }
    button { padding: 8px; margin: 4px; }
    #result { white-space: pre-line; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
  <h1>Count selected list elements</h1>
  <p>One initial item is hidden but remains in the document.</p>
  <ul id="tasks">
    <li id="alpha">Alpha</li>
    <li id="beta" class="done is-hidden">Beta</li>
  </ul>
  <button type="button" id="add">Add item</button>
  <button type="button" id="remove">Remove last</button>
  <button type="button" id="reset">Reset</button>
  <p id="result" aria-live="polite"></p>
  <script>
    $(function () {
      const initialHtml = $("#tasks").html();
      const $saved = $("#tasks > li");
      let next = 3;
      function refresh() {
        const $current = $("#tasks > li");
        $("#result").text(
          `current=${$current.length}
` +
          `completed=${$current.filter(".done").length}
` +
          `saved=${$saved.length}
` +
          `present=${$current.length > 0 ? "yes" : "no"}`
        );
      }
      $("#add").on("click", function () {
        $("<li>").text("New " + next++).appendTo("#tasks");
        refresh();
      });
      $("#remove").on("click", function () {
        $("#tasks > li").last().remove();
        refresh();
      });
      $("#reset").on("click", function () {
        $("#tasks").html(initialHtml);
        next = 3;
        refresh();
      });
      refresh();
    });
  </script>
</body>
</html>

Nur Alpha ist sichtbar, dennoch zählt .length beide li. Anfangs erscheint:

current=2
completed=1
saved=2
present=yes

1. Add item ergänzt New 3: current wird 3, completed bleibt 1 und saved 2.
2. Remove last entfernt den neuen Eintrag: current wird 2. Ein weiterer Klick entfernt das versteckte Beta: current wird 1, completed 0.
3. Der nächste Klick entfernt Alpha: current ist 0, present no. Weitere Klicks behalten null, weil nichts mehr zu entfernen ist.
4. Reset stellt das ursprüngliche HTML und die neue Eintragsnummer 3 wieder her und zählt erneut. Beide Elemente samt Versteckzustand und done kehren zurück.

Dieses Beispiel stellt festes Ausgangs-HTML wieder her. Auf einer echten bearbeitbaren Seite würde ein vollständiges Überschreiben auch Benutzereingaben löschen. Legen Sie den Reset-Bereich anhand der zu erhaltenden Daten fest.

Elementanzahl und Textlänge unterscheiden

Führen Sie nach Reset diesen Teilcode in der Entwicklerkonsole aus. Die ID missing-item existiert im Beispiel nicht.

if ($("#missing-item").length === 0) {
  console.log("not found");
}
console.log($("#tasks > li").length);
console.log($("#tasks > li").first().text().length);

not found
2
5

2 zählt li-Elemente, 5 ist die Länge der Zeichenkette Alpha im ersten Element. .text() liefert eine Zeichenkette, deren Eigenschaft die folgende .length ist. Derselbe Name hat je nach Empfänger, jQuery-Objekt oder Zeichenkette, eine andere Bedeutung.

Neu abfragen, Zeitpunkt prüfen und alten Code ersetzen

saved bleibt 2, weil die ursprüngliche Menge erhalten bleibt. Entfernen ihrer Elemente aus dem Dokument verändert ihre Länge nicht automatisch. Reset erzeugt neue Elemente, ersetzt saved jedoch nicht. Nutzen Sie wie refresh eine neue Abfrage für aktuelle Existenz und Anzahl.

Eine zu frühe Auswahl kann null liefern, bevor die Elemente existieren. Der DOM-Bereitschaftsaufruf $(function () { ... }) läuft, wenn das Document Object Model (DOM) manipulierbar ist. Asynchron eingefügte Elemente können später eintreffen; zählen Sie sie nach dem Einfügen.

Die alte Methode .size() wurde in jQuery 3.0 entfernt. Ersetzen Sie sie durch .length. Prüfen Sie bei unerwarteten Werten jQuery in Network, Console-Fehler und Version, Selektorbereich/Klassen/IDs sowie den Abschluss des Einfügens.