jQueryのdata()でDOMを変更できない

jQueryのdata()メソッドを使っていて少し詰まったのでメモ。

サンプルコード

jQueryのdata()メソッドで値を変更した場合、jQuery上のキャッシュを書き換えるのみで、DOMは変更されないようです。
ボタンをクリックすると、data属性の書き換えとそれに応じて背景色を変更するようにしてみます。

HTML

<div id="sample" data-count="1"></div>
<button id="btn">ボタン</button>

data-countが変更されると、背景色が変更されるようにします。

CSS

#sample[data-count="1"] {
	background: red;
}
#sample[data-count="2"] {
	background: blue;
}
#sample[data-count="3"] {
	background: green;
}
#sample[data-count="4"] {
	background: yellow;
}
#sample[data-count="5"] {
	background: black;
}

ボタンをクリックすると、data-countの変更前と変更後の値をconsoleで出すようにしています。

JavaScript

$(function() {
	$('#btn').on('click', function() {
		// 値の取得
		var currentCount = $('#sample').data('count');
		console.log('変更前の値', currentCount);

		// 値の書き換え
		currentCount++;
		$('#sample').data('count', currentCount);
		console.log('変更後の値', $('#sample').data('count'));
	});
});

ボタンをクリックすると、consoleはきちんとカウントが増えていますが、要素の色は変更されませんでした。
data()メソッドで書き換えるデモページ
前述のとおり、data()メソッドはjQuery上のキャッシュを書き換えるのみなので、DOM上のdata属性が変更されていないのが原因です。
　

対応方法としては、data()メソッドの代わりにattr()メソッドを使います。

JavaScript

$(function() {
	$('#btn').on('click', function() {
		// 値の取得
		var currentCount = parseFloat($('#sample').attr('data-count'));
		console.log('変更前の値', currentCount);

		// 値の書き換え
		currentCount++
		$('#sample').attr('data-count', currentCount);
		console.log('変更後の値', $('#sample').attr('data-count'));
	});
});

ボタンをクリックすると、consoleのカウントと要素の色変更が正しく動いているのを確認できました。
attr()メソッドで書き換えるデモページ
　

data()メソッドとattr()メソッドは取得や変更の挙動が異なるので、合わせて注意しないように注意してください。