【jQuery入門】lengthプロパティの使い方まとめ

こんにちは!フリーランスの桃太郎です。

jQueryにて要素の数を取得したり、要素そのものが存在するか確認する際によく使われるlengthプロパティがあります。

この記事では

・lengthとは?

・lengthの基本的な使い方

という基礎的な内容から、

・lengthで要素が存在するか判定する方法

・sizeメソッドとの比較

など実践的な内容についても解説していきます。

jQueryのlengthプロパティについて正しく理解し、必要な場面で使いこなすことができるように、わかりやすく解説します!

lengthの基本

まずはlengthプロパティについて基本的なことから解説を進めます。

lengthとは?

lengthプロパティは元々JavaScriptにて標準で用意されているもので、文字列の長さや配列の要素数などを取得するためのプロパティです。

jQueryではそのlengthプロパティを機能拡張し、要素の数を取得できるようにしています。

では、実際にその基本的な使い方を次章で見ていくことにしましょう。

lengthの基本的な使い方

まずはlengthプロパティの基本構文です。

jQueryオブジェクト.length

lengthはプロパティであり、メソッドではないため、lengthの後ろにカッコ()を付けないということを覚えておきましょう。

では具体的なサンプルコードで使い方を確認しましょう。

【実例】
チェックボックスにてチェックを入れた数を求める処理

[サンプルコード] [HTML]
<p>お供に連れていく動物を選択してください。</p>
<p><input type="checkbox" name="friend[]" value="dog">イヌ</p>
<p><input type="checkbox" name="friend[]" value="monkey">サル</p>
<p><input type="checkbox" name="friend[]" value="bird">キジ</p>

<button>結果</button>
<p id="p01"></p>
[jQuery]
$('button').click(function(){
var cnt = $('input[name="friend[]"]:checked').length
if( cnt == 0){
          $('#p01').text('チェックなし')
}else{
$('#p01').text(cnt + '匹チェックしました。')
}
})

実行結果
jquery_length_img01

チェックボックスにてチェックされている要素を表すjQueryオブジェクトは以下の通りです。

$('input[name="friend[]"]:checked')

こちらに対して、lengthプロパティを呼び出すことで、チェックされている要素の数を取得することができます。

何もチェックされていない場合はlengthプロパティの戻り値は 0 となることも覚えておくと良いでしょう。

lengthで要素が存在するか判定する方法

先ほど何もチェックされていない場合のlengthプロパティの戻り値が 0 となることを応用すると、要素が存在するかしないかを判定する場合にも利用できることが分かります。

つまり、戻り値が 0 なら要素は存在しない、1以上なら存在すると判定できるということです。

こちらも具体的な例をご紹介します。

【実例】
多数の要素の中に特定の要素が存在するかをチェックする処理

[サンプルコード] [HTML]
<div class="red">赤鬼</div>
<div class="red">赤鬼</div>
<div class="red">赤鬼</div>
<div class="blue">青鬼</div>
<div class="red">赤鬼</div>

<button>チェック</button>
<p id="result"></p>
[jQuery]
$('button').click(function(){
  if( $('.blue').length == 0){
      $('#result').text('青鬼が存在しません。')
  }else{
    $('#result').text('青鬼が存在します。')
  }
})

実行結果
jquery_length_img02

<div>タグ内のclass値にてblueがセットされている要素が存在するかどうかをlengthの戻り値が 0 かどうかで判定している処理です。

このようにlengthメソッドは要素数を取得するだけではなく、存在有無を判定するにも非常に役立つプロパティです。

sizeメソッドとの比較

lengthプロパティと似たような機能を持つものとしてsize()メソッドがあります。

sizeメソッドもlengthプロパティと同じく戻り値が要素数を表しており、存在しない場合は 0 が結果として得られます。

ただし、sizeメソッドは非推奨、つまり、実際のプログラムでは使用をオススメしないメソッドと位置付けられています。

これはsizeメソッドを呼び出すとJavaScriptの内部ではlengthプロパティを呼び出して処理を行なっているため、それであれば最初からlengthプロパティを使用する方が処理が早いという点が非推奨である理由です。

ですが、一応、こちらも具体的な例を元に確認しておきましょう。

【実例】
セレクトボックスの選択肢の数を表示する処理

[サンプルコード] [HTML]
<p>出身地を以下の<span></span>つから選択してください。</p>
<select>
    <option>0:北海道</option>
    <option>1:青森</option>
    <option>2:秋田</option>
    <option>3:岩手</option>
    <option>4:山形</option>
</select>
[jQuery *但し、jQueryのバージョン3では動かないので注意]
$('span').text($('option').size());

実行結果

出身地を以下の5つから選択してください。
//セレクトボックス...

このようにlengthプロパティのようにjQueryオブジェクトに対してsize()メソッドを呼び出すことで要素数を取得することが可能です。

まとめ

本記事ではjQueryのlengthプロパティを中心に要素の数を取得する処理についてご紹介しました。

JavaScriptにて元々用意されていたlengthはjQueryでは要素の数を取得したり、要素そのものが存在するかどうかを判定するために利用できるプロパティでした。

また、sizeメソッドも非推奨ながら類似した機能を持っており、要素数を取得するのに活用できるのでした。

様々なプログラミングの処理にて活用できるプロパティですので、ぜひlengthの使い方をしっかり習得してください。

もし今後、lengthプロパティに関して迷うことがあれば、ぜひこの記事を思い出して下さいね。

LINEで送る
Pocket

SEからWebエンジニアへ転職した理由

侍エンジニア塾卒業生の小池さんは、以前は社内SEとして約5年ほど勤務していました。しかし業務内容は社内のヘルプデスク対応など、プログラムを書く仕事は全くなかったそうです。

SEながらプログラムを書けない現状に「将来仕事がなくなるんじゃないか」と不安を感じ、プログラミング学習を決意。

弊社スクールで学習し、無事ベンチャー企業のプログラマーとして転職に成功しました。そんな小池さんの学習法や転職体験談を伺いましたので、是非ご覧ください。

「プログラミングができないSEは仕事がなくなる」不安を感じたSEが未経験から転職成功するまで
更新日 : 2019年10月7日

書いた人

湯浅 桃太郎

湯浅 桃太郎

20代は役者、30代はエンジニア、そして40代を迎えた現在、Webライターとして活動しながら、3人の息子たちの家庭教育、アンチエイジングなどにも力を入れて日々ノマドライフを楽しんでいます。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説