[JQuery]data属性の取り扱い | 1歩前進

HTML5からdataという独自属性が使えるようになりました。
data-* とdata-の後に好きな名前と値を設定が出来ます。

(例)

<div data-no="1" data-val="mokuji">目次</div>
<div data-no="2" data-val="mokuteki">目的について</div>

1 2	<div data-no="1" data-val="mokuji">目次</div> <div data-no="2" data-val="mokuteki">目的について</div>

その独自属性をjqueryで取得する方法。

data()を使って内容を取得する。
取得したデータは連想配列として取得します。

$(this).data();

1	$(this).data();

結果

{"no":"1", "val":"mokuji"}

1	{"no":"1", "val":"mokuji"}

個別に指定でひとつだけ取得も可

$(this).data("no");

1	$(this).data("no");

結果

{"no":"1"}

1	{"no":"1"}

独自に値が設定できるので便利かも～