jQuery / Selector / :empty - Elemente ohne Inhalt auswählen
jQuerys :empty wählt Elemente ohne Kindelemente und Text aus. Mit $("#data td:empty") begrenzen Sie die Auswahl auf leere Tabellenzellen. Sichtbar leere Elemente mit Leerraum oder Kind-Tags passen nicht; Elemente mit ausschließlich einem Kommentar dagegen schon.
Was gilt als leer?
Der Inhalt in der :empty-Dokumentation umfasst Textknoten. Einrückungen und Zeilenumbrüche zwischen Tags können daher entscheidend sein. Die folgende Unterscheidung wurde mit dem Beispiel dieses Artikels unter jQuery 4.0.0 und 3.7.1 geprüft.
| Inhalt im Element | :empty trifft zu? | Grund |
|---|---|---|
| Nichts | Ja | Keine Kindelemente und kein Text |
| Leerzeichen, Zeilenumbruch oder | Nein | Leerraum ist Text |
| Nur ein Kommentar | Ja | Kommentare zählen bei dieser Prüfung nicht |
| Leeres span oder br | Nein | Ein Kindelement existiert |
Auch die Definition in CSS Selectors Level 3 berücksichtigt Kommentare hierbei nicht. Ein title- oder class-Attribut allein macht ein Element nicht inhaltlich gefüllt. Ein durch display:none verborgenes Kind bleibt hingegen Bestandteil der Struktur. Verlassen Sie sich nicht nur auf das Aussehen.
Vollständiges Beispiel: leere Zellen füllen
Speichern Sie den gesamten Code als UTF-8 in empty-demo.html und öffnen Sie ihn im Browser. Eine Paketinstallation ist unnötig; für jQuery vom Content Delivery Network (CDN) benötigen Sie eine Internetverbindung. Das Beispiel verwendet die offizielle Distribution mit festem Versionsstand 4.0.0.
blank ist tatsächlich leer, spaces enthält drei Leerzeichen und comment nur einen Kommentar. Das span in nested und das br in break sind auch ohne sichtbaren Text Kindelemente. Ausgabe und Schaltflächen stehen außerhalb der ausgewählten Tabelle.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Empty table cells</title>
<style>
body { font: 16px/1.6 sans-serif; margin: 24px; }
table { border-collapse: collapse; width: 100%; max-width: 600px; }
td { border: 1px solid #aaa; padding: 16px; min-width: 80px; }
.is-empty { background: #fff0b3; }
button { margin: 16px 8px 0 0; padding: 8px; }
</style>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<h1>Empty table cells</h1>
<table id="data">
<tr><td id="blank"></td><td id="spaces"> </td></tr>
<tr><td id="comment"><!-- note --></td><td id="text">Hello</td></tr>
<tr><td id="nested"><span></span></td><td id="break"><br></td></tr>
</table>
<button type="button" id="fill">Fill empty cells</button>
<button type="button" id="reset">Reset</button>
<p id="result" aria-live="polite"></p>
<script>
$(function () {
function render() {
const $empty = $("#data td:empty");
$("#data td").removeClass("is-empty");
$empty.addClass("is-empty");
const ids = $empty.map((_, cell) => cell.id).get().join(", ");
$("#result").text(`${ids || "none"} | ${$empty.length}`);
}
$("#fill").on("click", function () {
$("#data td:empty").text("N/A");
render();
});
$("#reset").on("click", function () {
$("#blank, #comment").empty();
render();
});
render();
});
</script>
</body>
</html>Zu Beginn erscheint diese Ausgabe; blank und comment sind gelb hervorgehoben:
blank, comment | 2Änderungen beobachten und zurücksetzen
- Klicken Sie auf Fill empty cells. Die zwei passenden Zellen erhalten N/A. Eine neue Auswahl ergibt
none | 0. - Prüfen Sie spaces, nested und break. Wegen Leerraum oder Kindelementen werden diese nicht gefüllt.
- Klicken Sie auf Reset. Der Inhalt von blank und comment wird entfernt, beide passen wieder. Nur diese beiden Beispielzellen werden geleert; der ursprüngliche Kommentar wird nicht wiederhergestellt.
.text("N/A") fügt die Anzeigezeichenkette ein. render entfernt zuerst die Hervorhebung aller Zellen und setzt sie anschließend nur für die aktuell leeren. Damit bleibt auf gerade gefüllten Zellen keine veraltete Markierung stehen. Kontrollieren Sie Funktion und Anzeige gemeinsam.
Auswahl begrenzen und nach Änderungen erneuern
Verwenden Sie das gezielte $("#data td:empty") anstelle von $(":empty") für das gesamte Dokument. So erfassen Sie nicht versehentlich leere Elemente außerhalb der Tabelle oder span und br. Führen Sie direkt nach dem Öffnen oder nach Reset diesen Teilcode in der Entwicklerkonsole aus:
const $empty = $("#data td:empty");
console.log($empty.length);
console.log($empty.map((_, cell) => cell.id).get().join(", "));2
blank, commentEine jQuery-Auswahl ist keine automatisch aktualisierte Live-Liste. Wenn Sie $empty behalten und die Zellen füllen, bleibt die length dieses gespeicherten Objekts 2. Für die aktuelle Zahl leerer Zellen müssen Sie den Selektor erneut ausführen. Deshalb erstellt render bei jedem Aufruf eine neue Auswahl.
.empty(), :parent und Eingabewerte unterscheiden
:empty ist eine Auswahlbedingung. Die Methode .empty() entfernt Kinder und Text ausgewählter Elemente, lässt aber die Elemente selbst bestehen. Daher eignet sie sich zum Zurücksetzen der Zellen. Das Gegenstück :parent wählt Elemente mit Kindelementen oder Text. Es ist nicht die Methode .parent(), die zum übergeordneten Element wechselt.
Ein input kann trotz value JB auf :empty passen, denn sein Wert ist kein Kindinhalt. Lesen Sie zur Eingabeprüfung den aktuellen Wert mit .val() und vergleichen Sie ihn mit einer leeren Zeichenkette. Ob ausschließlich Leerraum ebenfalls als leer gilt, ist eine eigene Entscheidung. Strukturelle Leere und leere Eingabewerte sind verschiedene Kriterien.
Reagiert das Beispiel nicht, prüfen Sie im Network-Bereich der Entwicklertools, ob jQuery geladen wurde, und suchen Sie in Console nach Fehlern wie $ is not defined. Kontrollieren Sie außerdem die IDs und versehentlich eingefügten Leerraum zwischen den Tags einer vermeintlich leeren Zelle.
