data属性をjQueryで使ってみる

jQueryで処理を書いていて、要素に何らかの値を持たせたいときがよくあります。
そういった時、data属性を使うと便利です。

対応ブラウザ

data属性の対応ブラウザはこちら
一部ブラウザでは部分的なサポートになりますが、どのブラウザでも概ねできるようです。

data属性の取得

jQueryで取得する場合、attrを使用する方法とdataを使用する方法があります。

HTML

<div id="sample1" data-num="7">リンゴ</div>
<div id="sample2" data-num="5">バナナ</div>

JavaScript

dataで取得する場合、「data-」以降を指定します。

$(function() {
	// data属性の取得
	console.log($('#sample1').attr('data-num')); // 7
	console.log($('#sample1').data('num')); // 7

	console.log($('#sample1').attr('data-num') + $('#sample2').attr('data-num')); // 75
	console.log($('#sample1').data('num') + $('#sample2').data('num')); // 12
});

6～7行目で7 + 5 の結果がattrとdataで異なっていますが、これはattrが文字列として値を取得しているためです。
このように、取得する内容によってattrとdataで内容が異なる場合があるので注意が必要です。
data属性の取得のデモページ
　

data属性の設定

data属性を設定してみます。

HTML

<div id="sample1">リンゴ</div>
<div id="sample2">バナナ</div>

JavaScript

$(function() {
	// data属性の設定
	$('#sample1').attr('data-num', 50);
	$('#sample2').data('num', 18);

	// 設定できたか確認
	console.log($('#sample1').attr('data-num')); // 50
	console.log($('#sample2').data('num')); // 18
});

data属性の設定のデモページ
　

data属性の変更

設定してあるdata属性の値を変更してみます。

HTML

<div id="sample1" data-num="7">リンゴ</div>
<div id="sample2" data-num="5">バナナ</div>

JavaScript

$(function() {
	// data属性の取得
	console.log($('#sample1').attr('data-num')); // 7
	console.log($('#sample2').attr('data-num')); // 5
	console.log($('#sample1').data('num')); // 7
	console.log($('#sample2').data('num')); // 5

	// data属性の変更
	$('#sample1').attr('data-num', 50);
	$('#sample2').data('num', 18);

	// data属性を再度取得
	console.log($('#sample1').attr('data-num')); // 50
	console.log($('#sample2').attr('data-num')); // 5
	console.log($('#sample1').data('num')); // 7
	console.log($('#sample2').data('num')); // 18
});

data属性を変更する際の注意点として、attrがHTML上のdata属性を読み書きしているのに対して、dataはjQuery上のキャッシュを読み書きしています。
そのため、14行目ではdataがHTML上のdata属性を変更しておらず、attrが変更前の値を取得しています。
15行目も同様に、attr属性がjQuery上のキャッシュを変更していないため、dataが変更前のキャッシュの値を取得しています。
data属性の変更のデモページ
　

data属性の大文字の使用

data属性には基本的に大文字は使用できません。
(data属性の値には使用できます。)

HTML

<div id="sample1" data-itemNum="7">リンゴ</div>
<div id="sample2" data-item-num="5">バナナ</div>

JavaScript

$(function() {
	// data属性の取得
	console.log($('#sample1').attr('data-itemNum')); // 7
	console.log($('#sample2').attr('data-item-num')); // 5
	console.log($('#sample1').data('itemNum')); // undefined
	console.log($('#sample2').data('item-num')); // 5
	console.log($('#sample2').data('itemNum')); // 5
});

data属性に大文字を含んでいる場合、attrでは取得できますが、dataでは取得できません。
data属性で単語をつなげたい場合、キャメルケースではなく-を使うとつなげることができます。
dataで取得する場合は-を省略してキャメルケースで取得できます。
data属性の大文字の使用のデモページ
　

【参考サイト】

• jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件 – Qiita
• jQueryのdata-*属性キャッシュ仕様と対策
• [jQuery]data属性に大文字が使えない