先日解説した、HTMLのdata属性は自身で属性名・値を設定する事が出来る属性です。
これにより、JavaScriptやjQueryでの様々な処理に使用することができ、使いこなすと便利なものになります。
今回はjQueryのdataメソッドを使用した、data属性の取得・設定・変更の方法を解説していきます。
data属性についての詳しい解説は、HTML5のdata属性の使い方とJavaScriptやjQueryでの値の取得方法について【HTML】をご覧ください。
HTMLのdata属性とは
data属性はHTML5から追加された属性で、「カスタムデータ属性」とも呼ばれています。
その名前の通り、自身で「data-〇〇」の「〇〇」部分の名前を決める事ができます。
data属性についての詳しい解説は、HTML5のdata属性の使い方とJavaScriptやjQueryでの値の取得方法について【HTML】をご覧ください。
dataメソッドについて
dataメソッドを使う事で、data属性の値を取得・設定・変更する事ができます。
指定のdata属性が付与されているものだけにアニメーションを加えたり、タブ切り替えのコンテンツなど、様々な処理に利用できるものになります。
dataメソッドを使ったdata属性の取得
まずは、dataメソッドを使ったdata属性の取得方法です。
以下のコードをご覧ください。
<p data-name="yamada" data-age="20">data属性の値の取得</p>$(function(){
const result = $('p').data();
console.log(result);
// 実行結果：{age: 20, name: "tamada"}
});$(セレクタ).data()を使用する事で、指定セレクタに設定されているすべてのdata属性の属性名と値がオブジェクト型で取得できます。
data属性を利用する際、値のみを利用する事が多いと思いますが上記の方法だと利用しにくくなります。
個別に指定のdata属性の値のみを取得するには以下のように指定します。
$(function(){
const result = $('p').data('name');
console.log(result);
// 実行結果：yamada
});上記のように$(セレクタ).data(data属性名)とする事で、指定のdata属性の値のみを取得する事ができます。
$(‘p’).data(‘age’)とする事で「20」という値も取得可能です。
dataメソッドを使ったdata属性の設定
dataメソッドはdata属性の値の取得だけではなく、新たにdata属性を設定する事もできます。
記述方法は以下のようになります。
<p>data属性の設定</p>$(function(){
$('p').data('name', 'tarou');
});上記のようにすることでpタグに対してdata-name=”tarou”というdata属性を設定(追加)できます。
dataメソッドを使ったdata属性の変更
続いて、data属性を変更する方法です。
変更する方法は、先ほどのdata属性の設定(追加)と同じ方法となります。先ほどと同じ方法だと、指定したdata属性が無い場合はdata属性と追加し、data属性がある場合は値を変更します。
<p data-name="yamada">data属性の変更</p>$(function(){
console.log($('p').data('name'));
// 実行結果：yamada
$('p').data('name', 'tarou');
console.log($('p').data('name'));
// 実行結果：tarou
});data-name=”yamada”と設定されていたdata属性の値を$(‘p’).data(‘name’, ‘tarou’);を実行する事で「tarou」に変更しました。このように簡単に変更する事ができます。
dataメソッドとattraメソッドの違いについて
data属性の取得・設定・変更はdataメソッドでもattrメソッドでもどちらでも可能ですが、この2つのメソッドには違いがあります。
値の取得
以下はdata属性の値の取得についてのそれぞれの記述となります。
<p data-name="yamada">サンプルテキスト</p>$(function(){
$('p').attr('data-name');
$('p').data('name');
});上記のようにする事で、それぞれ値の取得はできますが、attrメソッドの場合はdata属性名だけではなく「data-属性名」と記述しないといけませんので注意してください。
data属性の設定・変更
data属性の設定・変更するには以下のように記述します。
<p id="text1" data-name="yamada">サンプルテキスト</p>
<p id="text2" data-name="yamada">サンプルテキスト</p>$(function(){
$('#text1').attr('data-age', '20');
$('#text2').data('age', '20');
});上記のようにする事で、どちらも新たに「data-age=”20″」というdata属性が設定されますが実行後のHTMLに違いがあります。実行後のHTMLは以下のようになります。
<p id="text1" data-name="yamada" data-age="20">サンプルテキスト</p>
<p id="text2" data-name="yamada">サンプルテキスト</p>このように、attrメソッドだと実際にHTMLに追加されます。一方dataメソッドの場合はjQuery内へ一時的に保存される形になりますので実際のHTMLに変化はありません。
この違いを理解せずに使用していると、dataメソッドで追加したdata属性をattrメソッドで取得しようとすると、data属性が無いといった事になりますので、一連の操作はどちらかで統一するようにしてください。
さいごに
いかがでしたでしょうか。
今回は、jQueryのdataメソッドでHTMLのdata属性を取得・設定・変更する方法を解説しました。
dataメソッドでもattraメソッドでもdata属性の操作は可能です。data属性を使いこなせるようになると便利ですので、ぜひこの機会に使ってみてください。
