jQuery / Property / .length - 選択した要素数を返すプロパティ

jQueryの .length は、jQueryオブジェクトに含まれる要素数を表す数値プロパティです。$("#tasks > li").length のように括弧なしで読み、該当要素がなければ0になります。追加や削除後の現在の文書を数えたければ、選択を再実行します。

要素数と存在を確認する

.length の公式文書が対象とするのは選択集合です。要素内の文字列やその子要素を数えるものではありません。非表示でも選択条件に一致すれば数えます。条件を絞れば、その部分集合の要素数を取得できます。

if ($("#missing-item")) は存在確認には使えません。該当要素がなくてもjQueryオブジェクトは作られ、オブジェクト自体は真と評価されます。.lengthが0か確認してください。また、関数ではないため .length() と呼ぶとTypeErrorになります。

追加・削除と現在数を比較する完全な例

全コードをUTF-8の length-demo.html に保存し、ブラウザーで開きます。インストールは不要ですが、CDN（Content Delivery Network、コンテンツ配信ネットワーク）から公式jQueryファイルを読む接続が必要です。コードは4.0.0を使用し、数・存在確認・追加・削除・リセットは3.7.1と4.0.0で実行確認しました。

初期リストはAlphaとBetaです。BetaはCSSで非表示ですが文書に残り、doneクラスもあります。currentは毎回再検索した数、completedはその中のdoneの数、savedは起動時に保存した集合の数です。

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

見えるのはAlphaだけでも、.lengthは2個のliを数えます。初期出力は次のとおりです。

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

1. Add item でNew 3を追加するとcurrentは3、completedは1、savedは2です。
2. Remove last で新しい項目を除くとcurrentは2です。もう一度押すと非表示のBetaが除かれ、currentは1、completedは0になります。
3. さらに押すとAlphaもなくなりcurrentは0、presentはnoです。空のリストで押し続けても削除対象がなく0のままです。
4. Reset は保存した初期HTMLと追加番号3を復元して再計算します。元の2要素、非表示状態、doneクラスが戻ります。

この例は固定の初期HTMLを復元します。実際の編集画面でHTML全体を上書きするとユーザーの編集も消えるため、保全するデータに合わせて初期化範囲を決めます。

要素数とテキストの長さを分ける

Reset後、開発者ツールのConsoleで次の部分コードを実行します。missing-itemというIDは例にはありません。

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はliの要素数、5は最初の要素のAlphaという文字列の長さです。.text()は文字列を返すため、後ろの.lengthは文字列のプロパティです。同じ名前でも、点の前がjQueryオブジェクトか文字列かで意味が変わります。

再検索・実行時点・古いコードを確認する

savedが2のままなのは最初の集合を保持しているためです。元の要素を文書から削除しても、その集合の長さは自動で変わりません。Resetは新要素を作りますがsavedを置き換えないため、現在の存在と数はrefreshのように再検索して判断します。

早すぎる選択は、要素がまだなく0になることがあります。例のDOM準備コールバック $(function () { ... }) はDOM（Document Object Model、文書オブジェクトモデル）を操作できる時点で動きます。非同期の要素はさらに後で入る場合があるので、挿入完了後に数えます。

古い.size() はjQuery 3.0で削除されました。現在は.lengthへ置き換えます。値がおかしければ、Networkの読み込み、Consoleのエラーとバージョン、選択範囲・クラス・ID、挿入完了の時点を確認します。