jQuery .data と data- 属性の関係

data-XXXX属性と、.dataで持ってくるデータの関係を調査してみた。

  1. jQuery Object側で持っていないデータ(たとえばXXXX)を .dataにより要求されるとdata-XXXX属性を見に行って、存在していればJSON.parseして値を取り出して戻してくる。

    このとき、jQuery側でCacheする。

  2. 1の後にdata-XXXX属性をsetAttribute等で変更、またはremoveAttributeで削除しても jQuery Object側のdataには影響がない。

  3. 1の後に.dataでjQuery Object側のデータを変更したり、.removeDataをしてjQuery Object側のデータを削除しても、data-属性に影響は与えない。

というわけで、基本的に二つは ほぼ別々の存在。データを扱いつつ属性も残しておきたい場合は コード側で同時アップデート等をする必要がありますね。