jQuery .data と data- 属性の関係
data-XXXX属性と、.dataで持ってくるデータの関係を調査してみた。
-
jQuery Object側で持っていないデータ(たとえばXXXX)を .dataにより要求されるとdata-XXXX属性を見に行って、存在していればJSON.parseして値を取り出して戻してくる。
このとき、jQuery側でCacheする。
-
1の後にdata-XXXX属性をsetAttribute等で変更、またはremoveAttributeで削除しても jQuery Object側のdataには影響がない。
-
1の後に.dataでjQuery Object側のデータを変更したり、.removeDataをしてjQuery Object側のデータを削除しても、data-属性に影響は与えない。
というわけで、基本的に二つは ほぼ別々の存在。データを扱いつつ属性も残しておきたい場合は コード側で同時アップデート等をする必要がありますね。