$.dataメソッドはDOMを書き換えるわけではない

$.data()メソッドでは、要素のカスタムデータ属性の取得はできるけど属性値の書き換えは出来ない。
$.data()ではjQuery内部にキャッシュされるという挙動を理解していないと、$.data()で属性値を書き換えたつもりでもHTML側に反映されないという問題があり思わぬバグが発生してしまうので要注意。

HTML

<div id="c1" data-count="1">1</div>
<div id="c100" data-count="100">100</div>

Javascript


var $c1 = $('#c1'),
    $c100 = $('#c100');

$c1.data('count', 2);

// data-count属性値は書き換えられず1, jQueryのキャッシュは2
console.log($c1.data('count') === 2); // true
console.log($c1.attr('data-count') === 2); // false

属性値の書き換えはattr()を使うとうまくいきます。

参考:
jQueryのdata-*属性キャッシュ仕様と対策|Web制作 W3G

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.