2016年11月24日木曜日

htmlにカスタム属性(data-*)を使って、jQueryで簡単アクセスする

どうも、俺です。

HTMLに独自のカスタム属性をつけて、
jQueryで操作できれば便利ということを発見しました。

カスタム属性を使えば、
<img data-hoge="ほげ" src="xxx.png" />

のように、「data-」のあとに好きな文字列を指定して値をセットできます。
data属性には一応仕様が定められており、
1文字以上のアルファベット、数字、ハイフン、アンダースコアが使えるようです。

で、本題はここから。
設定した「data-hoge」にjQueryを使ってアクセスするには、
$("img").data("hoge");

超簡単!!

data属性にJSONをセットもできるので、
<div data-hoge='{"aaaa":"あいうえお", "bbbb":1000}'>
のように指定しておけば、

$("div").data("hoge").aaa;

でアクセス可能!

ちなみに、data属性は複数も指定できます。

<span data-hoge="ほげ" data-fuga="ふが">

以上でぇぇぇす。

0 件のコメント:

amazon