【jQuery】カスタムデータ属性とは

カスタムデータ属性とは

カスタムデータ属性は、HTML要素に追加されたデータを格納するための属性です。これらの属性はdata-という接頭辞を持ち、その後に任意の属性名が続きます。これにより、HTML要素に関連付けられたカスタムデータを簡単に取得したり設定したりすることができます。

使用方法

例えば、以下のようなHTML要素があるとします：

<div id="myDiv" data-user-id="123" data-user-name="John"></div>

この<div>要素には、data-user-idとdata-user-nameというカスタムデータ属性があります。これらの属性にはそれぞれ123とJohnという値が格納されています。

jQueryを使用してこれらのカスタムデータ属性を取得する方法は次の通りです：

// カスタムデータ属性の値を取得する
const userId = $('#myDiv').data('user-id');
const userName = $('#myDiv').data('user-name');

console.log(userId); // 123
console.log(userName); // John

また、dataメソッドを使用してカスタムデータ属性の値を設定することもできます：

// カスタムデータ属性の値を設定する
$('#myDiv').data('user-id', 456);
$('#myDiv').data('user-name', 'Jane');

これにより、HTML要素のカスタムデータ属性が変更され、新しい値が設定されます。

まとめ

カスタムデータ属性は、JavaScriptやjQueryを使用して動的にデータをHTML要素に関連付ける際に便利です。これにより、データの取得や更新が簡単になります。