data()を利用するとグローバル変数のようにデータを保存することができます。HTML5から利用できる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()でデータの読み込み
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
})
