HTML5での独自データ属性(jQuery)

独自データ属性とは

---

HTML要素の属性として定義されていないwebページやwebアプリケーション固有の属性のこと。webページやwebアプリケーションで固有の独自データを取得する際に仕様する。

独自データ属性の定義

---

属性名の先頭に「data- 」をつける

<ul>
     <li id="number" data-id="1">No.1</li>
</ul>

独自データ属性の値を取得

<script>
   var number = ("#number");
   console.log(number.data('id'));
</script>

上記のdata-id以外にもdata-dateなど複数指定しても取得することができる。 これによってjs上でphpコードを埋め込んだり無駄なjsやコードを削減することができます。

qiita.com