【jQuery】.lengthプロパティ完全ガイド｜要素数・存在確認・配列カウントまで

jQueryオブジェクトの .length プロパティは、選択された要素の数を返します。要素の存在確認・リストのカウント・条件分岐など、日常的なjQuery操作に欠かせない知識です。本記事では .length の基本から実用パターンまで解説します。

1. .lengthの基本

.length はjQueryオブジェクトが持つプロパティ（メソッドではない）で、該当する要素の個数を数値で返します。要素が見つからない場合は 0 を返します。

// p タグの数を取得
var count = $('p').length;
console.log(count);  // ページ内のp要素の数

// 特定クラスの要素数
var items = $('.list-item').length;

// IDが存在するか確認
if ($('#my-element').length > 0) {
  console.log('要素が存在する');
} else {
  console.log('要素が存在しない');
}

2. 要素の存在確認（存在チェック）

jQueryで要素が存在するかチェックする最も一般的な方法です。

// ◯ 正しい書き方: .length で確認
if ($('#target').length) {
  // 要素が存在する場合の処理
}

// ◯ より明示的な書き方
if ($('#target').length > 0) { ... }
if ($('#target').length !== 0) { ... }

// △ 非推奨の書き方（過去には .size() が使われていた）
// if ($('#target').size()) { ... }  // jQuery 3.0 で廃止

// × よくある間違い: jQueryオブジェクトは常にtruthy
// if ($('#target')) { ... }  // 常にtrue！NG

3. リスト・テーブル行のカウント

// リストアイテムの数
var listCount = $('ul.my-list li').length;
console.log('リスト件数: ' + listCount);

// テーブルのデータ行数（ヘッダー行を除く）
var rowCount = $('table tbody tr').length;

// チェックされているチェックボックスの数
var checkedCount = $('input[type="checkbox"]:checked').length;

// 入力済みのフィールド数
var filledCount = $('input[type="text"]').filter(function () {
  return $(this).val() !== '';
}).length;

4. フォームバリデーションへの応用

必須項目の入力チェックや選択数の制限などに .length を活用できます。

$(function () {
  $('#submit-btn').on('click', function (e) {
    var errors = 0;

    // 未入力のテキストフィールドを確認
    $('input[required]').each(function () {
      if ($(this).val() === '') {
        $(this).addClass('error');
        errors++;
      } else {
        $(this).removeClass('error');
      }
    });

    // チェックボックスが1つ以上チェックされているか
    if ($('.check-group input:checked').length === 0) {
      alert('少なくとも1つ選択してください');
      errors++;
    }

    if (errors > 0) {
      e.preventDefault();
    }
  });
});

5. .lengthを使った実用パターン集

// パターン1: 特定条件を満たす要素がある場合のみ処理
if ($('.accordion').length) {
  initAccordion();
}

// パターン2: 選択数を表示
$('input[type="checkbox"]').on('change', function () {
  var count = $('input[type="checkbox"]:checked').length;
  $('#count-display').text(count + '件選択中');
});

// パターン3: 残りスロット数の計算
var maxItems  = 5;
var current   = $('.item').length;
var remaining = maxItems - current;
console.log('残り' + remaining + '件追加できます');

// パターン4: 最後の要素かどうか確認
$('.remove-btn').on('click', function () {
  var $item = $(this).closest('.item');
  if ($('.item').length <= 1) {
    alert('最後の項目は削除できません');
    return;
  }
  $item.remove();
});

6. size()との違いと注意点

過去には .size() メソッドが .length と同等の機能を提供していましたが、jQuery 3.0で廃止されました。既存コードで .size() を見かけた場合は .length に置き換えてください。

// 廃止: jQuery 3.0以降ではエラー
// $('p').size();  // × 使用禁止

// 正しい書き方
$('p').length;  // ◯

まとめ

jQueryの .length は要素数の取得・存在確認・カウントなど多くの場面で使います。jQueryオブジェクトは空でも truthy なので、存在確認には必ず .length を使ってください。.size() は jQuery 3.0 以降廃止なので注意しましょう。

関連記事: jQueryのeach()を使ったループ処理 / jQueryのeq()で要素の順番を指定して選択する方法

よくある質問（FAQ）