jQueryで要素数をカウントする方法を解説!

jQueryで要素数をカウントする方法を解説します。jQueryで要素数をカウントするためにlengthプロパティを用います。要素数をカウントすることで、if文で条件分岐出来たりします。また要素数をカウントする仕方としてループ文を回す方法もあるので紹介します。

コンテンツ [表示]

  1. 1jQueryで要素数をカウントしたい
  2. 2jQueryで要素数をカウントする方法
  3. 2.1DOMの特定のセレクタの要素数をカウント
  4. 2.2配列の要素数をカウント
  5. 2.3カウントに対して条件分岐を用いる方法
  6. 2.4ループ文を用いて要素の数をカウントする方法
  7. 3まとめ

jQueryで要素数をカウントしたい

jQueryで要素数をカウントして、その要素がいくつあるのか確かめたい、条件分岐させたいということがあると思います。

そんな時にjQueryのlengthプロパティを用います。

jQueryではかつてはsize()メソッドでも数えることができていたのですが、現環境では非推奨となっているため、lengthプロパティを用いて解説していきます。

Photo bygeralt

jQueryで要素数をカウントする方法

ではjQueryで要素の数をカウントする方法を解説します。

まだjQueryを導入していない方は、jQueryを読み込むためコードをhead要素などに以下を記述しましょう。

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

DOMの特定のセレクタの要素数をカウント

では実際にサンプルコードを用いて、特定のセレクタのDOMの要素の数をカウントしてみたいと思います。

今回は要素の数としてli要素の数をカウントしてみました。そうすると上のプレビューのようにli要素は全部で5個あるので、右側のプレビューで「5」と表示されていることが分かります。

ではコードの解説を行います。

まずカウントしたいセレクタに対して、jQueryで指定して、lengthプロパティでその数を取得します。

そして表示したい要素に対して、.text()メソッドでその数を表示させました。

ちなみに注意点として対象の要素内に子要素があったとしても、子要素はカウントされず、指定された要素のみカウントされます。

つまり今回だとli要素の中に別の要素が入っていてもその要素はカウントの対象外で、li要素のみカウントされることになります。

配列の要素数をカウント

今度はjQueryで配列の要素数をカウントする方法について解説します。

実際にサンプルコードを用いて配列の要素数をカウントしてみましょう。

このように配列の中には3個の文字列が格納されているため、それがカウントされ3と表示されていることが分かります。

jQueryではDOMの要素を数える場合も、配列の要素を数える場合も同じくlengthプロパティで可能となりますので、覚えておきましょう。

カウントに対して条件分岐を用いる方法

要素の数をカウントして、その数によって条件分岐をすることができます。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように今回は.listに該当する要素が1以上あるので、trueと表示されます。

この例ではif文でカウントしたい要素が1以上の場合にはWEB上にtrueと表示させて、else文でカウントしたい要素が0の場合にはWEB上にfalseと表示されます。

ループ文を用いて要素の数をカウントする方法

最後にカウントしてループさせる方法について解説します。jQueryでループさせる方法の1つであるeach()メソッドを使います。

では実際にサンプルコードを用いて挙動を見てみましょう。

このように.listの数だけ毎回ループし、カウントされて、WEB上に.listの数の5が表示されていることが分かります。

ではサンプルコードの解説を行います。

まずcount変数を作り、初期値を0としておきます。

そしてカウントしたい要素に対してeach()メソッドを付与します。each()メソッドの中身はコールバック関数でその処理の中でcount++としてcountをインクリメントしておきます。

そうすることでカウントしたい要素数の数だけcount変数の値が加算されます。

まとめ

いかがでしたでしょうか?

jQueryで要素数をカウントして、条件分岐を用いたりすると、より複雑な仕組みを実装することができます。

ぜひ、ここで紹介した方法を試してみてください。

Qumeru[クメル]ではプログラミング学習が出来るカリキュラムを5月31日までの期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひカリキュラムをお試し下さい!

関連記事

【期間限定】全カリキュラム無料で提供中!

Qumeru[クメル]ではプログラミング学習の全カリキュラムを5月31日まで期間限定で無料で提供しています。

無料登録することで、すぐにプログラミング学習を始められます。ぜひお試し下さい!

目次