jQueryのlengthの使い方と、要素が存在するかチェックする

jQueryで、要素の数を取得したり、要素そのものが存在するかチェックするときに、よく使われるlengthの使い方と、要素が存在するかチェックするコードを作りました。

jQuery関連記事

• 

  【jQuery】pdfが存在するか、mimeタイプのバリデーションする

• 

  jQuery UIのsortableを使ってリストをドラッグで並び替える

• 

  jQueryのモーダルウィンドウを使ってフォームの確認画面を実装する

• 

  HTMLのcanvasタグとJavaScriptで円グラフの画像をつくる

• 

  bxSliderをカルーセルやコンテンツスライダーなど便利なサンプル5種

• 

  bxSliderの使い方と、オプションでのカスタマイズ方法

• 

  select・optionタグをjQueryで、プルダウンの選択値を取得、変更する

• 

  jQueryでinput[type="file"]で画像アップロード時にプレビューを表示する

• 

  jQueryでrequiredの専用エラー文と文字数制限のバリデーションをつくる

lengthの使い方

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

jQueryでは、lengthで、要素の数を取得できます。

要素があるか判別、処理を振り分ける方法【.length】

JavaScript

if($('#box').length){
  console.log("ある");
}else{
	console.log("ない");
}

if文の中にオブジェクト.lengthを入れることで要素の数をチェック。
要素がない場合の戻り値は「0」となるため、存在するか判別することができます。
そこから条件を分岐させればOKです！

lengthはプロパティであり、メソッドではないため、lengthの後ろに()を付けないので気をつけましょう。

要素があるか判別、処理を振り分ける方法【.size()】

JavaScript

if($('#box').size()){
  console.log("ある");
}else{
	console.log("ない");
}

上と同じような処理を.size()でもできます。
.size()も要素がない場合の戻り値は「0」なるため、存在するか判別することができます。
そこから条件を分岐させればOKです！

ただし、同じ処理をしたいならlengthを使った方が、sizeメソッドより処理が早いのでお勧めです。