TAGS :

スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった場面にはよく遭遇するのでjQueryで要素の存在の有無を判別する処理を自分用のメモ書きとしてご紹介してみます。

jQueryで特定の要素が存在するかどうかを判別する処理【.length】

タグそのものに対して判別させることも可能ですが、サンプルではID「#sample」が存在するかどうかの処理について。

要素が存在するかどうかの判別方法はいろいろありますが、扱いやすかったものとしてまず「.length」を使っての判別から。

要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。

「.length」を使っての「#sample」が存在した際の処理は以下のようになります。

◆SCRIPT
$(function(){
	if($('#sample').length){
		～　ここに「＃sample」が存在した場合の処理を記述　～
	}
});

存在した場合と存在しなかった場合の処理を分岐するには以下のようになります。

◆SCRIPT
$(function(){
	if($('#sample').length){
		～　ここに「＃sample」が存在した場合の処理を記述　～
	} else {
		～　ここに「＃sample」が存在しなかった場合の処理を記述　～
	}
});

要素が存在しなかった場合のみ判別するには以下のようになります。

◆SCRIPT
$(function(){
	if(!($('#sample').length)){
		～　ここに「＃sample」が存在しなかった場合の処理を記述　～
	}
});

jQueryで特定の要素が存在するかどうかを判別する処理【.size()】

「.length」の他にほぼ同様の方法で「.size()」を使って判別処理することも可能です。

「.length」と同じく「.size()」も要素の数があるかどうか、を判別する処理になり、存在しない場合は値が空になるので、存在しないという判別になります。

「.size()」を使っての「#sample」が存在した際の処理は以下のようになります。

◆SCRIPT
$(function(){
	if($('#sample').size()){
		～　ここに「＃sample」が存在した場合の処理を記述　～
	}
});

存在した場合と存在しなかった場合の処理を分岐するには以下のようになります。

◆SCRIPT
$(function(){
	if($('#sample').size()){
		～　ここに「＃sample」が存在した場合の処理を記述　～
	} else {
		～　ここに「＃sample」が存在しなかった場合の処理を記述　～
	}
});

要素が存在しなかった場合のみ判別するには以下のようになります。

◆SCRIPT
$(function(){
	if(!($('#sample').size())){
		～　ここに「＃sample」が存在しなかった場合の処理を記述　～
	}
});

以上2点がjQueryで特定の要素が存在するかどうかを判別する処理についてでした。

サンプルではID「#sample」について判別させましたが、これをclass「.sample」にしたり、タグ自体「div」などにすることで対象要素を変えることが可能です。

判別する構成がシンプルな場合は「.each()」などで判別させることも可能だと思いますが、状況によって上記のようなやり方と使い分けるといいかと思っています。

jQueryで特定の要素が存在するかどうかを判別する際にぜひ。。。