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

2018年10月6日

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


HTML
CSS
Javascript

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

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

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

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

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

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

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

素材の壺