HTML5+jquery カスタムデータ属性（data-〇〇〇）

基本

・HTML5になる。
・「data-〇〇〇」の「〇〇〇」は小文字にする
・「data-〇〇〇」の値は数値やbool値などに変換してくれている

▼HTMLで設定

<div id="hoge" data-kushi="鳥精">〇〇〇</div>

▼jqueryで取得

var dataVal = $('#hoge').data('kushi');

複数指定

▼HTMLで設定

<div id="hoge" data-kushi="鳥精" data-taste="たれ">〇〇〇</div>

▼jqueryで取得

var dataA = $('#hoge').data('kushi');
var dataB = $('#hoge').data('taste');

配列でまとめて指定

「"」ではなく「'」でくくらないとダメな感じ

▼HTMLで設定

<div id="hoge1" data-order='["鳥精", "たれ"]'>〇〇〇</div>
<div id="hoge2" data-order="['鳥精', 'たれ']">〇〇〇</div>

▼jqueryで取得

var dataOrder1 = $('#hoge1').data('order');
// dataOrder1[0]、dataOrder1[1]に格納されている

var dataOrder2 = $('#hoge2').data('order');
// dataOrder2は配列ではなく「['鳥精', 'たれ']」という文字列が格納される

オブジェクト（連想配列）で指定

▼HTMLで設定

<div id="hoge" data-order='{"kushi":"鳥精", "taste":"たれ"}'>〇〇〇</div>

▼jqueryで取得

var dataOrder = $('#hoge').data('order');
// dataOrder.kushi、dataOrder.tasteに格納されている

jqueryで値変更

「.data()」はキャッシュのみ変更となる。キャッシュのみの変更だと後で面倒なコトになるので、「.attr()」も同時に指定するのが無難。

$('#hoge').data('order', 値);
$('#hoge').attr('data-order', 値);