スクリプトを組む際に、特定の要素が存在する場合のみに処理を実行させる、といった
場面にはよく遭遇するので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で特定の要素が存在するかどうかを判別する際にぜひ。。。

  • このエントリーをはてなブックマークに追加
BlackFlag
FOLLOW

Related Posts

Comments (0)







コメント内容

※コメントにHTMLタグを直接入力しないでください。
※HTMLタグを入力する際はタグ一つ一つの括弧「<」「>」を全角に変換して入力してください。
コメントは承認制になっているのですぐには反映されません。コメント頂いた内容については出来る限り早めの対応を心掛けていますが、時期によって返答が遅くなってしまうことがありますので、何卒ご了承ください。
» コメントについてのご注意  |  » ライセンスに関して

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

Hatena Bookmark
Popular Entries
Recent Entries
PR
Facebook
Tweets
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
  • jQuery Technical Note
  • 外掛OUT! jQuery 高手精技
Partner