jQueryで要素数を取得する２つの方法とコード例まとめ

jQueryで要素数を取得するにはいくつか方法があります。

ここではその要素数取得のやり方やコード例、違いや注意点についてまとめました。

このページの目次

要素数を取得する２つの方法

その方法とは次の２つ

それぞれの使い方やコード例は次の通りです。

まず初めは要素のlengthプロパティから取得する方法

使い方は簡単でセレクタなどから取得した要素に対して呼び出すだけです。

例えば次は box というクラス名を持つ要素数をコンソールに表示するコード例

<div class="box"></div>
<div class="box"></div>
<div></div>
<div class="box"></div>
<div></div>

$(function(){
  /** boxクラスの要素数を表示 */
  console.log($('.box').length);
    /// => 3
});

$(function(){

/** boxクラスの要素数を表示 */

console.log($('.box').length);

/// => 3

});

上コードのように $('.box').length みたいにアクセスすれば要素数がそのまま返ってきます。

ちなみに要素内の子孫要素は含まないという点に注意

セレクタなどに当てはまるjQueryオブジェクトのみが要素数カウントの対象になります。

お次はsizeメソッドから要素数を取得する方法

こちらはlengthプロパティと違いメソッドなので、呼び出す度に要素数をカウントして返します。

例えば次は box クラスを持つ要素数をsizeメソッドでコンソールに表示するコード例

<div class="box"></div>
<div class="box"></div>
<div></div>
<div class="box"></div>
<div></div>

$(function(){
  /** boxクラスの要素数を表示 */
  console.log($(".box").size());
    /// => 3
});

$(function(){

/** boxクラスの要素数を表示 */

console.log($(".box").size());

/// => 3

});

上コードみたく $(".box").size() のように要素に対してsizeメソッドを実行するだけです。

lengthプロパティ同様、こちらも子孫要素は含みません。

セレクタに当てはまるjQueryオブジェクトのみが要素数としてカウントされることに注意です。

どちらも要素数をカウントする点では全く同じです。

しかし両者の決定的な違いは

であるということ

そのためsizeメソッドは関数呼び出しのオーバーヘッド（ムダな処理）があります。

なのでlengthプロパティを使った方がパフォーマンス的にはベストです。

ちなみにですがsizeメソッドはバージョン1.8で非推奨、3.0で廃止されました。

将来的には使えなくなることが確実なのでそういう意味でも使わない方が安全です。

オーバーヘッドがなく、公式でも推奨されているlengthプロパティを使いましょう。

ということで要素数取得の方法をもう一度まとめ

lengthプロパティで取得
例えば $('.box').length とするとboxクラスを持つ要素数が返ってくる
要素数を取得する場合はこちらを使った方がパフォーマンス的にベスト
sizeメソッドで取得
例えば $(".box").size() とするとboxクラスを持つ要素数が返ってくる
ただし1.8で非推奨、3.0で廃止されたので使わないように注意！