jQueryのlengthで要素や文字列、配列をカウント

  • このエントリーをはてなブックマークに追加
  • Pocket

スポンサードリンク

jQueryのlengthは要素や文字数、配列の値をカウントしてくれます。

単純に文字数を数えたり、要素が存在するか、配列に値が入っているか判定したりと便利なプロパティです。

同様の処理をするsize()はjQuery3.0で廃止されたため、lengthでカウントしましょう。

lengthの使い方

要素の数をカウント

まずは特定の要素の数をカウントしてみましょう。

以下のサンプルでは、HTML要素の数をカウントし、コンソールログに出力しています。

HTML

jQuery

結果(コンソール)

以下のようにコンソールログに要素の数が表示されます。


3


参考:jQueryでコンソールログを使ったデバッグ方法

構文

lengthは以下のような構文になります。

$( セレクタ ).length

もし存在しなければ0を返します。

文字数をカウント

次に文字数が何文字かをカウントしてみましょう。

以下のサンプルでは、文字数をカウントし、コンソールログに出力しています。

jQuery

結果(コンソール)

以下のようにコンソールログに文字数が表示されます。


11


日本語などの2バイト文字も1文字としてカウントされます。

配列をカウント

lengthは配列の値もカウントできます。

以下のサンプルでは、配列に入っている値の数をカウントし、コンソールログに出力しています。

jQuery

結果(コンソール)

以下のようにコンソールログに配列に入っている値の数が表示されます。


4


オブジェクトをカウント

オブジェクトはlengthを使ったこれまでの方法ではカウントできません。結果はundefinedとなります。

オブジェクトをカウントしたい場合は、object.keys()を使います。

以下のサンプルでは、オブジェクトに入っている中身(メンバー)の数をカウントし、コンソールログに出力しています。

jQuery

結果(コンソール)

以下のようにコンソールログにオブジェクトに入っている中身(メンバー)の数が表示されます。


5


条件分岐でlengthを使う

lengthはただ数をカウントするだけでなく、特定の要素が存在するか?といった使い方もできます。

要素が存在するかチェック

ある要素の子要素に特定のクラスが存在するかチェックするサンプルです。if文と組み合わせて使います。

以下のサンプルでは、もしactiveというクラスが子要素に存在していたらコンソールにtrue!と表示させ、なかったらfalse!と表示させます。

HTML

jQuery

結果(コンソール)

クラスが存在しているので以下のようにコンソールログにtrue!と表示されます。


true!


参考:jQueryでのif文の書き方
参考:find() で子要素、孫要素を取得

スポンサードリンク

  • このエントリーをはてなブックマークに追加
  • Pocket

コメントを残す

*