以前に「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で要素の属性が存在するかどうかを判別する際にぜひ。。。