jQueryに要素にdata属性が存在しているか確認する方法！
jQueryに要素にdata属性が存在しているか確認する方法をサンプルコード付きで解説します。要素にdata属性が設定されているかどうかを確かめて安全にdata属性を利用しましょう。
コンテンツ [表示]
jQueryのdata()はHTMLの要素のdata属性を利用し、要素にデータを保持させる事が出来ます。
データを保持させる
// データを保持させる
$('div').data('birthday', '1990-01-01');
// →これでdata-birtudah属性に1990-01-01のデータが保持される要素に保持されているデータを取得してJavaScriptの処理に利用したり、要素にデータを保持させて後で利用するなどあたかもデータベースのような扱いでdata()を利用します。
データを取得
// 保持されているデータを取得
$('div').data('birthday');今回はjQueryで要素にdata属性が存在しているかどうか確認する方法をサンプルコード付きで解説します。
jQueryで要素にdata属性が存在しているか確認する方法
早速jQueryで要素にdata属性が存在しているか確認する方法を紹介します。下記のサンプルコードを見てみましょう。
上記のサンプルコードは.sample-1にはdata-birthdayで属性が設定されており、.sample-2には設定されていない状態です。
この時にjQueryで指定したセレクタでdata-birthdayの属性が設定されているかどうかは下記のように確かめる事が出来ます。
data属性が設定されているかの確認
if( typeof $('.sample-1').data('birthday') !== 'undefined' ) {
// 設定されている場合
}data(data属性名)で保持されている値を取得できますが、data属性が設定されていない場合はundefinedが返ります。そのため、値の型がundefinedかどうかを確かめる事で、要件を満たすことが出来ます。
一方でよくありがちなのが下記のパターンです。
【非推奨】data属性が設定されているかの確認
if( $('.sample-1').data('birthday') ) {
// 設定されている場合
}このパターンでも問題無い場合もありますが、数字の0やfalsyとなる値が保持されている場合に不具合につながる可能性がありますので、できるだけundefinedで判定する方法を利用しましょう。
