【HTML5】カスタムデータ属性（data-*）に、配列やオブジェクトを格納し、jQueryで値を取得する

各種データの格納と取得について。

裏でデータを持たせておきたい場合、カスタムデータ属性を使用すると便利です。

HTML記載方法

記載方法は下記の用に data-* で記載します。
*の部分にハイフン「-」も使用可能ですが、jsでのアクセス時にキャメルケースに変換する必要があります。

html

<div id="id1" data-test1='value1'>文字列</div>

<div id="id2" data-test2='{"value1", "value2", "value3"]}'>配列</div>

<div id="id3" data-test3='{"key1":"value1","key2":"value2"}'>連想配列</div>

<div id="id4" data-test4='{"key1":[5,6,7],"key2":[1,2,3,4,5,6,7]}'>多次元配列</div>

属性の値をシングルクォーテーション「'」で囲む。
配列やオブジェクトの値で文字列を使用する場合はダブルクォーテーション「"」で囲む。

jQuery記載方法

js

const text = $('#id1').data('test1')
console.log(text) // 出力：value1

const array  = $('#id2').data('test2')
console.log(array[2]) // 出力：value3

const obj  = $('#id3').data('test3')
console.log(obj["key2"]) // 出力：value2

const obj  = $('#id4').data('test4')
$.each(obj["key1"] function (k,v) {
    console.log(v]) // 出力：5 => 6 => 7
})

.data('*記載ID')でアクセスして取得します。

注意事項

※data属性を再設定する場合はキャッシュの問題があるので下記を参照
jQueryのdata-*属性キャッシュ仕様と対策