data-**属性とdata()の使い方〜jQuery

jQuery

data()を利用するとグローバル変数のようにデータを保存することができます。HTML5から利用できるdata-**属性はこのdata()とは別ものですが、data()で操作することも可能です。data-**属性をdata()で操作すると色々トラブルが起こることがあります。data-**属性とdata()は別物として捉えておく方が混乱がなくなると思います。

今回はdata-**属性とdata()の使い方について少し掘り下げてみます。

スポンサーリンク

data()で単純にデータを保存する場合

data()でデータの保存方法

$(‘セレクタ’).data( キー, 値 )

data()でデータを保存しても、data-**属性が作成されるわけではありません。

data()でデータの読み込み

$(‘セレクタ’).data( キー )

HTML5の新属性のdata-**の値を取得したり保管する場合

data()でHTML5の新属性のdata-**の値を取得したり保管することもできます。しかし、通常はdata-**の値を取得したり保管する場合はattr()を使用します。

attr()でデータの保存方法

$(‘セレクタ’).attr( ‘data-**’, 値 )

attr()でデータを保存すると、data-**属性が作成されて値が入ります。

attr()でデータの読み込み

$(‘セレクタ’).attr(‘data-**’)

attr()で取得する方法

まずはattr()を使ってdata-**の値を操作する方法をサンプルで確認してください。
attr()で取得するサンプル

このサンプルでは、attr()を使ってli要素にdata-no属性を作成して、li内のa要素のhref属性の値をdata-no属性の値としてセットしています。
次に最後のli要素のdata-no属性に格納されている値をattr()を使って読み込んでp要素で表示しています。
attr()でdata-no属性の値を保管したり、読み込むことができることを確認できます。

HTMLコード

<ul>
	<li><a href="#no1"></a>no1</li>
	<li><a href="#no2"></a>no2</li>
	<li><a href="#no3"></a>no3</li>
	<li><a href="#no4"></a>no4</li>
	<li><a href="#no5"></a>no5</li>
</ul>
<p></p>	

jQueryコード

$(function(){
	$('li').each(function(){
		$(this).attr('data-no',$('a',this).attr('href'));
	})
	$('p').text($('li:last').attr('data-no'));//#no5
})

data()で取得する方法

今度はdata()を使ってdata-no属性の値を読み取るサンプルです。
data()で取得するサンプル

このサンプルもattr()を使って、li要素にdata-no属性を作成してli内のa要素のhref属性の値をdata-no属性の値としてセットしています。
次に今度は、最後のli要素のdata-no属性に格納されている値をdata()を使って読み込んでp要素で表示しています。
attr()を使った場合と同様のことができることがわかります。

jQueryコード

$(function(){
	$('li').each(function(){
		$(this).attr('data-no',$('a',this).attr('href'));
	})
	$('p').text($('li:last').data('no'));//#no5
})

data()で取得する方法で起こる問題

先のサンプルの場合はattr()を使ってもdata()を使っても同じ結果になります。
けれども、作成したデータの値をattr()で更に変更した後にdata()を使用しても問題は起こりません。

attr()で値を変更した後にattr()で値を取得

attr()で値を変更した後にattr()で値を取得するサンプル

最後のliのdata-no属性には「#no5」の値が入っていますが、これをattr()で「#no50」に変更しています。
attr()で値を一旦変更した後更にattr()で値を取得する場合は問題が起こりません。正しく「#no50」と表示されます。

jQueryコード

$(function(){
	$('li').each(function(){
		$(this).attr('data-no',$('a',this).attr('href'));
	})
	$('li:last').attr('data-no','#no50');
	$('p').text($('li:last').attr('data-no'));//#no50
})

attr()で値を変更した後にdata()で値を取得

attr()で値を変更した後にdata()で値を取得するサンプル

これも先程と同様の内容です。最後のliのdata-no属性には「#no5」の値が入っていますが、これをattr()で「#no50」に変更しています。
attr()で値を一旦変更した後更にdata()で値を取得する場合も問題が起こりません。正しく「#no50」と表示されます。

jQueryコード

$(function(){
	$('li').each(function(){
		$(this).attr('data-no',$('a',this).attr('href'));
	})
	$('li:last').attr('data-no','#no50');
	$('p').text($('li:last').data('no'));//#no50
})

data()で値を取得後にattr()で値を変更した後に更にdata()で値を取得

前のサンプルと似ていますが、違う点は最初にattr()でデータを保存した直後にdata()を使ってその値を読み込んでしまった後に、attr()で値を変更してしまった場合です。この場合は問題に問題が起こります。再びdata()で値を確認しても最初に確認したデータがキャッシュされてしまい、次回に確認したデータも同じ値になってしまうことです。

data()で値を取得後にattr()で値を変更した後に更にdata()で値を取得するサンプル

このサンプルでは、最初にattr()でデータを保存した直後にdata()を使ってその値を読み込んでいます。次に、attr()で値を変更しています。その後attr()で値を確認していますが、この値は正しく表示されます。しかし次にdata()でもう一度値を読み込むと最初にdata()で読み込んだ値の#no5と表示されてしまいます。

一度data()で値を取得したらその値を保持し続けて、attr()で値を変更しても新しい値が取れません。
data()とattr()は併用しないようにした方がミスをしないで済むと思います。この場合はattr()で値を取ると問題はおこりません。

jQueryコード

$(function(){
	$('li').each(function(){
		$(this).attr('data-no',$('a',this).attr('href'));
	})
	$('.val1').text('最初にdata()で値を取得したら'+$('li:last').data('no')+'です。');//data()で値を取得 #no5
	$('li:last').attr('data-no','#no50');//attr()で値を変更
	$('.val2').text('値変更後にattr()で値を取得したら'+$('li:last').attr('data-no')+'です。');//attr()で値を確認 #no50
	$('.val3').text('値変更後にdata()で値を取得したら'+$('li:last').data('no')+'です。');//data()で値を確認 #no5
})

data()で値を変更後にattr()で値を取れません

また、次のような場合も問題が起こります。
data()で値を変更後にattr()で値を取れないサンプル
これはdata()ではdata-**属性の値を直接書き換えないためです。

jQueryコード

$(function(){
	$('li').each(function(){
		$(this).attr('data-no',$('a',this).attr('href'));
	})
	$('li:last').data('no','#no50');
	$('p').text($('li:last').attr('data-no')); //#no5
})

data()で値を変更後にdata()で値をとることは可能

data()で値を変更後にdata()で値をとることができるサンプル
data()で値を変更後にdata()で値をとることは当然可能です。

jQueryコード

$(function(){
	$('li').each(function(){
		$(this).attr('data-no',$('a',this).attr('href'));
	})
	$('li:last').data('no','#no50');
	$('p').text($('li:last').data('no')); //#no50
})
タイトルとURLをコピーしました