LoginSignup
199

More than 5 years have passed since last update.

jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件

Posted at

jQueryでカスタムデータ属性(data-*)の設定/取得を行うメソッドにはdata()attr()があるけど、全く別物だったのでメモ。

結論から言うと

  • attr()
    • HTMLのカスタムデータ属性(data-*)を読み書きする
    • 値は常に文字列として扱われる
  • data()
    • jQuery内のキャッシュのデータを読み書きする(ただし、取得時に該当キャッシュが無ければカスタムデータ属性を取得する)
    • 値には自動で型が設定される(文字列、数値、Bool値、オブジェクト、配列)

たとえば

<div id="fruit" data-number="01">りんご</div>

とあった場合、attr()data()を混在させると想定通りにならないことがある。

例その1

// まずキャッシュを見に行くけど最初は'number'が存在しないので、カスタムデータ属性を見に行って"01"を取得する
// そしてついでにデータをキャッシュする
$('#fruit').data('number')

// attr()を使ってカスタムデータ属性を変えてみる
$('#fruit').attr('data-number', '02')

// キャッシュを見に行くと前回取得時に作ったキャッシュがあるので、そこから "01" を取得する
$('#fruit').data('number')

例その2

// キャッシュに'number'の値として "02" を登録
$('#fruit').data('number', '02')

// attr()を使ってもカスタムデータ属性を見に行くので、"01" を取得する
$('#fruit').attr('data-number')     // "01"

// data()を使うと、設定した値である "02" が取得できる
$('#fruit').data('number')          // "02"

jQuery ver.1.11.0 で試してみたけど、"02"は文字列として解釈されるっぽい。
以前のバージョンだと"02"2になってたみたいだけど…。どのバージョンから変わったかは未確認。
"2"ならdata()を挟むことで数値型になった。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
199