$.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()
を使うとうまくいきます。