jQueryのlengthは要素や文字数、配列の値をカウントしてくれます。
単純に文字数を数えたり、要素が存在するか、配列に値が入っているか判定したりと便利なプロパティです。
同様の処理をするsize()はjQuery3.0で廃止されたため、lengthでカウントしましょう。
lengthの使い方
要素の数をカウント
まずは特定の要素の数をカウントしてみましょう。
以下のサンプルでは、HTML要素の数をカウントし、コンソールログに出力しています。
HTML
|
1 2 3 4 5 |
<ul> <li>リスト01</li> <li>リスト02</li> <li>リスト03</li> </ul> |
jQuery
|
1 2 3 4 5 |
// 要素をカウントし変数に格納 var len = $('li').length; // 要素数を出力 console.log(len); |
結果（コンソール）
以下のようにコンソールログに要素の数が表示されます。
3
構文
lengthは以下のような構文になります。
$( セレクタ ).length
もし存在しなければ0を返します。
文字数をカウント
次に文字数が何文字かをカウントしてみましょう。
以下のサンプルでは、文字数をカウントし、コンソールログに出力しています。
jQuery
|
1 2 3 4 5 6 7 8 |
// カウントしたい文字列を変数に格納 var str = '文字数もカウント可能！'; // 文字数をカウントし変数に格納 var res = str.length; // 文字数を出力 console.log(res); |
結果（コンソール）
以下のようにコンソールログに文字数が表示されます。
11
日本語などの2バイト文字も1文字としてカウントされます。
配列をカウント
lengthは配列の値もカウントできます。
以下のサンプルでは、配列に入っている値の数をカウントし、コンソールログに出力しています。
jQuery
|
1 2 3 4 5 6 7 8 |
// カウントしたい配列を変数に格納 var arr = ['りんご', 'みかん', 'バナナ', 'いちご']; // 配列の値をカウントし変数に格納 var res = arr.length; // 値の数を出力 console.log(res); |
結果（コンソール）
以下のようにコンソールログに配列に入っている値の数が表示されます。
4
オブジェクトをカウント
オブジェクトはlengthを使ったこれまでの方法ではカウントできません。結果はundefinedとなります。
オブジェクトをカウントしたい場合は、object.keys()を使います。
以下のサンプルでは、オブジェクトに入っている中身（メンバー）の数をカウントし、コンソールログに出力しています。
jQuery
|
1 2 3 4 5 6 7 8 |
// カウントしたいオブジェクトを変数に格納 ar obj = {tokyo:'東京', osaka:'大阪', aichi:'名古屋', hokkaido:'札幌', fukuoka:'福岡'}; // オブジェクトの中身（メンバー）をカウントし変数に格納 var res = Object.keys(obj).length; // メンバーの数を出力 console.log(res); |
結果（コンソール）
以下のようにコンソールログにオブジェクトに入っている中身（メンバー）の数が表示されます。
5
条件分岐でlengthを使う
lengthはただ数をカウントするだけでなく、特定の要素が存在するか？といった使い方もできます。
要素が存在するかチェック
ある要素の子要素に特定のクラスが存在するかチェックするサンプルです。if文と組み合わせて使います。
以下のサンプルでは、もしactiveというクラスが子要素に存在していたらコンソールにtrue!と表示させ、なかったらfalse!と表示させます。
HTML
|
1 2 3 4 5 |
<ul> <li>リスト01</li> <li class="active">リスト02</li> <li>リスト03</li> </ul> |
jQuery
|
1 2 3 4 5 6 |
// もし子要素にクラスがあったら if ($('ul').find('.active').length) { console.log('true!'); } else { console.log('false!'); } |
結果（コンソール）
クラスが存在しているので以下のようにコンソールログにtrue!と表示されます。
true!
参考：jQueryでのif文の書き方
参考：find() で子要素、孫要素を取得
