jQueryで要素がある属性(値)を持っているか調べる2つの方法

ある要素が特定の属性(値)を持っているか調べたい・・

そんな場合、jQueryでは2つの方法を使って調べることが可能です。

ここではその属性(値)の調べ方とコード例について色々まとめみました。

方法1.isメソッドを使う方法

まず初めの方法は isメソッド を使ったやり方

このメソッドを使うと要素が特定のセレクタに当てはまるかどうかを判定できます。

なので次のような用途に使用可能

  • 要素が特定クラスを含むか知りたい場合
  • 要素の持つ属性で処理を切り替えたい場合
  • 要素の属性値で異なる処理をしたい場合

わざわざクラス名とか属性値を取得せず、単純に持っているか( = true  ) or 持っていないか( = false  )で判定したいときに便利なメソッドですね。

これを使って属性(値)を持っているか調べるコード例は次の通り

 

まず例えば、次のdiv要素を作成したとしましょう。

そして、「この要素が date  属性を持っている時」だけ何か処理したいとします。

その場合は次のードみたいにisメソッドを使えばOK

上コードの dateBox.is('[date]')  という部分に注目

このように属性名を []  で囲んであげれば持っているかの判定ができます。

そして持っているなら~~の処理、持ってなければ~~の処理という具合に処理を分けれる仕組みです。

こっちを使う方が、 属性値を取得してゴニョゴニョするより効率的で確実 ですね。

特定の属性値を持っているかの判定をするには

この isメソッド は属性を持っているかではなく、
属性が特定の値を持っているかどうかというチェックにも使えます。

 

例えば先ほどのdiv要素を少し改造して、次みたいな要素を作ったとしましょう。

この要素は year  属性と month  属性と day  属性の3つを持ち、それぞれ値を持っています。

そして year  属性の値に応じて処理を分けたい場合のコードは次の通り

上コードの dateBox.is('[year=2019]')  と書いてるのが属性値で判定している部分

jQuery(CSS)では属性名と属性値を =  で結んであげることで、ある属性値にマッチするかのセレクタが書けます。単純にそれを使って判定してるだけです。

ちなみに属性値を絞り込むときは 正規表現 も使用可能

詳しく知りたい方は上記事をご覧ください。

完全な正規表現が使えるわけじゃないものの、前方一致・後方一致・不完全一致の3つに対応してるので、色々使える場面はあると思います。

方法2.attrメソッドで属性を持つか判定するやり方

お次はattrメソッドを使って属性(値)を持つかを調べる方法

attrメソッドっていうのは文字通り要素の属性値を調べるためのメソッドです。

例えばある要素の style 属性の値(つまりCSS)を調べたいなら、次のような感じで使用可能

このメソッドに属性名だけを渡すと、その属性の値を返してくれます。

ちなみに属性が見つからない場合は undefined  (ブラウザによっては false  )を返してくる模様

なので、それを応用すれば属性を持っているか調べることができるって訳です。

 

例えば先ほどと同じく次みたいな要素を作ったとしましょう。

そして、「この要素が date  属性を持っている場合」のみ何か処理するコード例は次の通り

ちょっと書き方が紛らわしいですが、 dateBox.attr('date')  の返り値が undefined  または false  でないか確認してるだけです。

とはいえ、やっぱりこの書き方は見にくいので使うのは避けた方がいいかも・・・

さっき紹介した isメソッド を使う方が見やすいし、コード的なバグも少なくなると思います。

属性値を持つかの判定をする方法まとめ

ということで紹介した方法を簡単にまとめると次の通り

  • 方法1.isメソッドを使う
    例えばこのメソッドに [example]  というセレクタを渡せばexample属性を持つかを判定できる。また属性値を持つかで判定したいなら [example=xxx]  みたいに名前と値を = で結べばOK
  • 方法2.attrメソッドを使う
    このメソッドで属性値を取得し、それが undefined  または false  でないなら属性を持っていないことが判定可能。ただパッと見で分かりにくいので、使わないのが無難・・・

以上、jQueryで要素が特定の属性(値)を持っているか調べる方法でした。ではでは(^_^)/~

Shareこの記事をシェアしよう!

Commentsこの記事についたコメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください