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

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

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

その方法とは次の２つ

• lengthプロパティから取得
• sizeメソッドから取得

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

lengthプロパティから取得

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

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

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

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

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

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

sizeメソッドから取得

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

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

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

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

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

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

lengthとsize()、どっちを使うべき？

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

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

• lengthは要素内で管理されたプロパティ
• size()は要素に対して呼び出すメソッド

であるということ

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

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

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

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

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

ここまでのまとめ

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

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

sizeメソッドも一応3.0未満までは使えますが、それ以降は廃止されるので使うべきではないですね。

以上jQueryで要素数を取得する方法についてでした。