ある要素が特定の属性（値）を持っているか調べたい・・
そんな場合、jQueryでは２つの方法を使って調べることが可能です。
ここではその属性（値）の調べ方とコード例について色々まとめみました。
方法１．isメソッドを使う方法
まず初めの方法は isメソッド を使ったやり方
このメソッドを使うと要素が特定のセレクタに当てはまるかどうかを判定できます。
なので次のような用途に使用可能
- 要素が特定クラスを含むか知りたい場合
- 要素の持つ属性で処理を切り替えたい場合
- 要素の属性値で異なる処理をしたい場合
わざわざクラス名とか属性値を取得せず、単純に持っているか（ = true ） or 持っていないか（ = false ）で判定したいときに便利なメソッドですね。
これを使って属性（値）を持っているか調べるコード例は次の通り
まず例えば、次のdiv要素を作成したとしましょう。
1 2 3 | <div id="now-date-box" date="2019-04-26"> 2019年04月26日 </div> |
そして、「この要素が date 属性を持っている時」だけ何か処理したいとします。
その場合は次のードみたいにisメソッドを使えばOK
1 2 3 4 5 6 7 | $(function(){ var dateBox = $('#now-date-box'); if(dateBox.is('[date]')){ var date = dateBox.attr('date'); console.log('date = ' + date); } }); |
上コードの dateBox.is('[date]') という部分に注目
このように属性名を [] で囲んであげれば持っているかの判定ができます。
そして持っているなら～～の処理、持ってなければ～～の処理という具合に処理を分けれる仕組みです。
こっちを使う方が、 属性値を取得してゴニョゴニョするより効率的で確実 ですね。
特定の属性値を持っているかの判定をするには
この isメソッド は属性を持っているかではなく、
属性が特定の値を持っているかどうかというチェックにも使えます。
例えば先ほどのdiv要素を少し改造して、次みたいな要素を作ったとしましょう。
1 2 3 4 | <div id="now-date-box" year="2019" month="04" day="26"> 2019年04月26日 </div> |
この要素は year 属性と month 属性と day 属性の３つを持ち、それぞれ値を持っています。
そして year 属性の値に応じて処理を分けたい場合のコードは次の通り
1 2 3 4 5 6 7 8 | $(function(){ var dateBox = $('#now-date-box'); if(dateBox.is('[year=2019]')){ console.log('year is 2019'); }else{ console.log('year is NOT 2019'); } }); |
上コードの dateBox.is('[year=2019]') と書いてるのが属性値で判定している部分
jQuery（CSS）では属性名と属性値を = で結んであげることで、ある属性値にマッチするかのセレクタが書けます。単純にそれを使って判定してるだけです。
ちなみに属性値を絞り込むときは 正規表現 も使用可能
詳しく知りたい方は上記事をご覧ください。
完全な正規表現が使えるわけじゃないものの、前方一致・後方一致・不完全一致の３つに対応してるので、色々使える場面はあると思います。
方法２．attrメソッドで属性を持つか判定するやり方
お次はattrメソッドを使って属性（値）を持つかを調べる方法
attrメソッドっていうのは文字通り要素の属性値を調べるためのメソッドです。
例えばある要素の style 属性の値（つまりCSS）を調べたいなら、次のような感じで使用可能
1 2 3 4 | $(function(){ /// ある要素のstyle属性値を取得 var css = $('#hogehoge').attr('style'); }); |
このメソッドに属性名だけを渡すと、その属性の値を返してくれます。
ちなみに属性が見つからない場合は undefined （ブラウザによっては false ）を返してくる模様
なので、それを応用すれば属性を持っているか調べることができるって訳です。
例えば先ほどと同じく次みたいな要素を作ったとしましょう。
1 2 3 | <div id="now-date-box" date="2019-04-26"> 2019年04月26日 </div> |
そして、「この要素が date 属性を持っている場合」のみ何か処理するコード例は次の通り
1 2 3 4 5 6 7 | $(function(){ var dateBox = $('#now-date-box'); var date = dateBox.attr('date'); if(typeof date !== typeof undefined && date !== false){ console.log('date = ' + date); } }); |
ちょっと書き方が紛らわしいですが、 dateBox.attr('date') の返り値が undefined または false でないか確認してるだけです。
とはいえ、やっぱりこの書き方は見にくいので使うのは避けた方がいいかも・・・
さっき紹介した isメソッド を使う方が見やすいし、コード的なバグも少なくなると思います。
属性値を持つかの判定をする方法まとめ
ということで紹介した方法を簡単にまとめると次の通り
- 方法１．isメソッドを使う例えばこのメソッドに [example] というセレクタを渡せばexample属性を持つかを判定できる。また属性値を持つかで判定したいなら [example=xxx] みたいに名前と値を = で結べばOK
- 方法２．attrメソッドを使うこのメソッドで属性値を取得し、それが undefined または false でないなら属性を持っていないことが判定可能。ただパッと見で分かりにくいので、使わないのが無難・・・
以上、jQueryで要素が特定の属性（値）を持っているか調べる方法でした。ではでは(^_^)/~
