jQueryで要素がある属性（値）を持っているか調べる２つの方法

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

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

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

このページの目次

方法１．isメソッドを使う方法
- 特定の属性値を持っているかの判定をするには
方法２．attrメソッドで属性を持つか判定するやり方
属性値を持つかの判定をする方法まとめ

方法１．isメソッドを使う方法

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

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

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

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

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

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

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

<div id="now-date-box" date="2019-04-26">
2019年04月26日
</div>

2019年04月26日

</div>

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

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

$(function(){
  var dateBox = $('#now-date-box');
  if(dateBox.is('[date]')){
    var date = dateBox.attr('date');
    console.log('date = ' + date);
  }
});

$(function(){

var dateBox = $('#now-date-box');

if(dateBox.is('[date]')){

var date = dateBox.attr('date');

console.log('date = ' + date);

}

});

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

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

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

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

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

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

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

<div id="now-date-box" 
     year="2019" month="04" day="26">
2019年04月26日
</div>

<div id="now-date-box"

year="2019" month="04" day="26">

2019年04月26日

</div>

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

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

$(function(){
  var dateBox = $('#now-date-box');
  if(dateBox.is('[year=2019]')){
    console.log('year is 2019');
  }else{
    console.log('year is NOT 2019');
  }
});

$(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）では属性名と属性値を = で結んであげることで、ある属性値にマッチするかのセレクタが書けます。単純にそれを使って判定してるだけです。

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

PisukeCode - Web開発まとめ

CSSでセレクターに正規表現を使うには？コード例で解説

https://pisuke-code.com/css-how-to-use-regexp

最初に言っておくとCSSでは完全な正規表現は使えません。ただ完全ではないものの、セレクタ内で正規表現を使うことは可能です。ということでCSS内のセレクタで使える正規表現とそのコード例を紹介します。セレクタに使える３つの正規表現CSSでセレクタに使うことができる正規表現は次の３つ前方一致後方一致不完全一致この３つを使ってある属性に当てはまる要素にスタイルを適用可能です。詳しい使い方やコード例については次の通り前方一致 : attr^="value"まず１つめは属性値に対して前方一致させるような正規表現...

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

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

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

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

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

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

$(function(){
  /// ある要素のstyle属性値を取得
  var css = $('#hogehoge').attr('style');
});

$(function(){

/// ある要素のstyle属性値を取得

var css = $('#hogehoge').attr('style');

});

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

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

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

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

<div id="now-date-box" date="2019-04-26">
2019年04月26日
</div>

2019年04月26日

</div>

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

$(function(){
  var dateBox = $('#now-date-box');
  var date = dateBox.attr('date');
  if(typeof date !== typeof undefined && date !== false){
    console.log('date = ' + date);
  }
});

$(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 でないなら属性を持っていないことが判定可能。ただパッと見で分かりにくいので、使わないのが無難・・・