Jump to the content

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

JavaScript

$.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

注目記事

最近の記事

ぼくが書いてます

イソップ

フロントエンドエンジニア

イソップ

ページの先頭に戻る

Search results

×