jQueryでdata属性の変更が反映されない?jQuery.data()での値の取り扱いについて

jQuery.data()での値を取得

jQuery の jQuery.data()についてのつまずきポイントを共有します。

jQuery.data()

jQuery.data() を利用してdata属性の値を取得したとき、該当のdata属性に行った、動的な変更が反映されていない場合があるかと思います。

<span id="number" data-num="1">test</span><br>

 const kazu = $('#number');
 console.log(kazu.data('num')); // 1 が出力されます
 kazu.attr("data-num", 2); // data属性の'num'を 2 に書き換える
 console.log(kazu.data('num')); // 1 が出力されてしまう(2に書き換えたはずでは!?)
 console.log(kazu.attr("data-num")); // 2 が出力されます(問題ありません)
 

これは、jQueryオブジェクトがデータ属性をキャッシュしているという仕様によるものです。
そのため、HTML要素自体は確かに変更しているのですが、 jQuery.data() から取得できる値は変更されていないという状態になります。

対処方法

まず、jQuery.data()での変更は反映されます。ただし、他の手段での動的な変更も考慮しますと(変更される可能性をすべて排するのは難しいと思います)、data属性の値の取得を他の手段に移行すべきかもしれません。
jQueryですと、jQuery.attr()、JavaScript はHTMLElement.datasetというプロパティを提供しています。
こちらから取得するのが安心かもしれません。

タイトルとURLをコピーしました