HTML5のdata属性に配列やオブジェクトを格納してjQueryで取得する│.dotown lab

データの格納場所として便利なdata属性（独自データ属性）に、配列やオブジェクトを格納しておいて、jQueryで値を取得する方法をメモ。 HTML 属性の値を「'（シングルクォーテーション）」で囲む。 配列やオブジェクトの値で文字列を使用する場合は「"（ダブルクォーテーション）」で囲まないと、配列やオブジェクトが文字列として認識されてしまう。 <div id="arr" date-arr='[1, 2, "c"]'> 配列の場合 </div> <div id="obj" date-obj='{"a":1, "b":2, "c":"c"}'> オブジェクトの場合 </div> JavaScript (jQuery) var arr = $('#arr').data('arr'); var obj = $('#obj').data('obj'); console.log(arr[0]); //

[wwd]

javascript

[tuki0918]

data属性がdateになっているのでコピペする場合は注意

[tacamy]

カスタムデータ属性の値の配列が文字列でしか取得できなくて泣いてたら、シングルクォーテーションとダブルクォーテーションを逆にするだけで、ちゃんと配列で取得できた〜

[istb16]

属性を囲むのに、シングルとダブルで使いどころが違うのにはめられました。 "HTML5のdata属性に配列やオブジェクトを格納してjQueryで取得する│.dotown lab"