No.518

data属性を書き換えても変わらないとお嘆きの貴方へ

　HTMLタグのdata属性はJavascriptによる制御時に何かと便利なので利用している人も多いだろう。

　ところがこの属性、特徴を知ってないと容易に嵌まる。ほんとに嵌まる。

　というわけで、聞かれたときの回答内容をメモ。

前提

　jQuery.data() メソッドによる変更は、 DOMの操作を行わずメモリ内のキャッシュを変更する だけである。
　そのため下記の特徴を持つ。

• DOM要素のdata属性を書き換えても data() メソッドで取得できる値は変わらない。
• data() メソッドで値を書き換えても、DOM要素のdata属性は変わらない。

　その上でjQueryのメソッドの特徴は下記となる。

jQuery.attr() メソッド

• DOM要素を書き換えることができる。（ ＝ attr() の値は変わる。）
• data() の値は変わらない。

jQuery.data() メソッド

• data() の値を書き換えることができる。
• DOM要素は変わらない。（ ＝ attr() の値は変わらない。）

完全な解決を望むなら

　jQuery.data() と jQuery.attr() を両方実行して、キャッシュもDOMも書き換えること。

　コストは倍だけどトラブルが起きなくなるメリットは…精神的に大きい…かも。