jQuery / Selector / :empty - 内容のない空要素を選択するセレクター

jQueryの:emptyは、子要素もテキストもない要素を選択します。$("#data td:empty")で範囲を絞れば、空の表セルに初期表示を入れられます。見た目が空でも空白や子タグがあれば対象外で、コメントだけの要素は対象です。

何を空の要素と判定するのか

jQueryの:empty仕様でいう内容にはテキストノードも含まれます。タグ間の字下げや改行が空白テキストになる点に注意します。以下はこの記事の例をjQuery 4.0.0と3.7.1で実行して確認した区別です。

コメントを除外する扱いはCSS Selectors Level 3の定義にもあります。titleやclass属性があるだけでは内容ありにはなりません。逆に子をdisplay:noneで隠しても構造から消えるわけではないため、見た目だけで判定しません。

空の表セルにN/Aを入れる完全な例

コード全体をUTF-8のempty-demo.htmlに保存してブラウザーで開きます。パッケージのインストールは不要ですが、コンテンツ配信ネットワーク（CDN）からjQueryを読むためネット接続が必要です。公式配布ファイルのjQuery 4.0.0に固定しています。

blankは本当に空、spacesは空白3個、commentはコメントだけです。nestedのspanとbreakのbrは、文字がなくても子要素です。結果表示とボタンは選択範囲の表の外側に置いています。

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

初期表示は次のとおりで、blankとcommentの2セルが黄色になります。

blank, comment | 2

変化を確認して初期化する

1. Fill empty cellsを押します。対象の2セルにN/Aが入り、再選択の結果はnone | 0になります。
2. spaces・nested・breakを確認します。空白または子要素があるため変更されません。
3. Resetを押します。blankとcommentの内容が削除され、再び2セルが対象になります。この2セルだけの初期化であり、最初のコメント自体を復元する処理ではありません。

.text("N/A")で表示用文字列を入れます。renderは全セルの強調クラスを先に外し、現在の空セルだけに付け直します。これにより内容を入れたセルに黄色が残るのを防ぎます。処理結果と表示状態を合わせて確認します。

範囲を絞り、変更後は選択し直す

文書全体の$(":empty")より、目的が明確な$("#data td:empty")を使います。表外の空要素やspan・brまで意図せず選ぶのを避けられます。例を開いた直後かReset後に、開発者ツールのコンソールで次の部分コードを実行すると個数とIDを確認できます。

const $empty = $("#data td:empty");
console.log($empty.length);
console.log($empty.map((_, cell) => cell.id).get().join(", "));

2
blank, comment

jQueryの選択結果は文書変更に連動するライブリストではありません。$emptyを保持してセルを埋めても、そのlengthは2のままです。現在空のセル数は選択し直して確認します。renderもそのため毎回新しく選択します。

.empty()・:parent・入力値との違い

:emptyは選択条件で、.empty()メソッドは選択要素の子とテキストを取り除く操作です。セル自体は残るためResetに利用できます。逆の条件の:parentは子要素やテキストを持つ要素を選びます。親へ移動する.parent()メソッドとも別です。

inputのvalueにJBがあっても、値は子の内容ではないので:emptyに一致し得ます。ユーザーが入力したかは.val()で現在値を取得して空文字列と比較します。空白だけの入力も空扱いするかは別の方針です。構造が空であることと入力値が空であることを混同しません。

反応しない場合は開発者ツールのNetworkでjQueryの読み込みを確認し、Consoleで$ is not definedなどのエラーを調べます。HTMLと選択子のIDが一致しているか、編集で空セルのタグ間に空白が入っていないかも確認します。