以前に「jQueryで特定の要素が存在するかどうかを判別する処理」と題して、
Webページ上に特定の要素が存在するかどうかの判別を紹介しましたが
同じような判別で、要素に特定の属性がついているかどうか、といった
判別処理が必要になる場面にもわりと遭遇することがあるので
jQueryで要素の属性の存在の有無を判別する処理について
自分用のメモ書きとしてご紹介してみます。

jQueryで特定の属性が存在するかどうかを判別する処理【.attr】

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

属性が存在するかどうかの判別方法はいくつかありますが
最初は「.attr()」メソッドを使っての判別から。

「.attr()」メソッドは要素の属性を扱う処理になり
存在しない場合は値が空になり、存在しないという判別になるので
その動作を利用して処理していきます。

「.attr()」メソッドを使って「#sample」のIDがついた要素に
「style」属性が存在しているかどうか処理をしていきます。

まずは属性が存在しているかどうかの処理から。
記述方法については以下のようになります。

◆SCRIPT
$(function(){
	if($('#sample').attr('style')){
		~ ここに「#sample」に「style」属性が存在した場合の処理を記述 ~
	}
});

if分を使って「#sample」のIDに対して
「.attr()」メソッドを使って「style」属性を指定することで
その属性がついている場合のみ処理を実行させることができます。

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

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

最後に、属性が存在しなかった場合のみ判別するには
以下のようになります。

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

jQueryで特定の属性が存在するかどうかを判別する処理【.is】

「.attr()」メソッドの他にほぼ同様の方法で
「.is()」メソッドを使って属性の有り無しの判別処理することも可能です。

「.is()」は条件とマッチする要素があるかどうか判別する処理になるので
その条件に属性をあてることで、存在するかどうかの判別になります。

一つ目のサンプルと同様に
「.is()」メソッドを使って「#sample」のIDがついた要素の
「style」属性が存在するかどうかの処理をしていきます。

まずは属性が存在しているかどうかの処理から。
記述方法については以下のようになります。

◆SCRIPT
$(function(){
	if($('#sample').is('[style]')){
		~ ここに「#sample」に「style」属性が存在した場合の処理を記述 ~
	}
});

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

◆SCRIPT
$(function(){
	if($('#sample').is('[style]')){
		~ ここに「#sample」に「style」属性が存在した場合の処理を記述 ~
	} else {
		~ ここに「#sample」に「style」属性が存在しなかった場合の処理を記述 ~
	}
});

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

◆SCRIPT
$(function(){
	if(!($('#sample').is('[style]'))){
		~ ここに「#sample」に「style」属性が存在しなかった場合の処理を記述 ~
	}
});

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

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

サンプルでは「style」属性を例に挙げましたが
実際は「data」属性など値を使ってあれこれ処理をする際に
要素に対して属性の有無の判別ができるといろいろと便利になると思います。

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

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

Related Posts

Comments (0)







コメント内容

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

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

Hatena Bookmark
Popular Entries
Recent Entries
Animal Protection
  • 福島被曝牛支援のお願い
  • NO FUR
Books
Partner