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

  • 124
    Like
  • 0
    Comment
More than 1 year has passed since last update.

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()を挟むことで数値型になった。