data属性をjQueryで使ってみる

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

対応ブラウザ

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

try-to-use-the-data-attribute-in-jquery01

 

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属性の大文字の使用のデモページ
 

【参考サイト】

 

このエントリーをはてなブックマークに追加

関連記事

1件のコメント

  1. […] data属性をjQueryで使ってみる | cly7796.net […]

attr/prop/data [jQuery] – Site-Builder.wiki へ返信する コメントをキャンセル

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

2024年3月
 12
3456789
10111213141516
17181920212223
24252627282930
31