2018年10月6日

jQueryで特定の要素の有無を確認する「length」と「size」の書き方

要素があるかどうかを判別して分岐処理、動的なコンテンツでよく使う処理なのでコピペ用として。要素の数を取得して、0か1以上かを判別するわけですが、jQueryでは主に「length」を使用します。

HTMLの例

  • HTML
  • CSS
  • Javascript

まずこのliの数を取得するには以下のように書きます。

$(function(){
var size = $('.list li').length;
alert(size); //3
});

この取得した要素数に応じてif文で分岐処理します。

lengthの書き方

$(function(){
if($('.list li').length){
// .list li が1つ以上存在する
}else{
// .list li が存在しない
}
});

size()の書き方

「length」と同じような挙動で「size()」という書き方もありますが、jQuery1.8から非推奨になっているようです。この書き方をしている人は「length」への書き換えをオススメします。

$(function(){
if($('.list li').size()){
// .list li が1つ以上存在する
}else{
// .list li が存在しない
}
});

以上、jQueryで特定の要素の有無を確認する「length」と「size」の書き方でした。

,

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です