Web.fla

主食は、html/css/php/javascript(jQuery) デザートはactionscript!WEBに関することをメモってくサイト

*

html5の独自データ属性を設定してjQueryで取得してみる

      2015/07/18

さて、最近はhtml5もすっかり浸透してきましたがhtml5では新しく独自のデータ属性を設定できるようになりました。まぁカスタムデータ属性とも呼ばれているようです。

これに伴って自分でこういったデータを設定したいなぁと思った時やそのカスタムデータ属性をjQueryのattrで取得したりと可能性はさらに広がってきます。今回はそんな独自おnデータ属性が設定する方法を書いていこうかと思っています。



html5の独自データ属性とは?

当たり前ですが、cssで設定するときにid属性だったりclass属性、画像ではalt属性など付けたりしますが、html要素に適切な属性が無かった時に、独自データを追加することができます。

主にWebページで固有の独自データを取得する際に使用することが多いと思います。最近ですとjqueryMobileなどに利用されていたりします。

独自データ属性のマークアップ

独自データ属性は、よくカスタムデータ属性とかdata属性なんて呼ぶこともあるんですが、マークアップとしては、「data-」以降に文字列を指定することで設定できます。

複数の独自データ属性の設定する方法

data属性には複数の値を設定することも可能です。

一つの独自データ属性に複数の値を設定する方法

複数の独自データ属性を上記の方法で設定することもできますが、関連する情報を一つの独自データ属性に設定したい場合も出てくることがあると思いますが、その設定方法。

jQueryから独自データ属性の値を取得する方法

jQueryからアクセスする方法として2通りあります。

data()で値を取得する

jQueryのdataメソッドを利用する場合は、data()の引数に「data-」以降の文字列を指定し、ハイフンを含む場合はハイフンを取って、次の文字を大文字にします。

attr()で値を取得する

jQueryのattrメソッドを利用する場合は、attr()の引数に通常のIDとかclass名を指定するように「data-」以降の文字列もすべて記述する。

data()とattr()での取得の違いとは?

data()を利用すると独自データ属性の値は文字列、数値、オブジェクト、配列に型変換されるようです。

逆にattr()を利用した場合は独自データの値は文字列として扱われるようなので、文字列を取得するならattr()を利用して数値など扱うようであれば、data()を利用するのが良さそうです。下記のサイトが詳しく書いてありました。

 - html5, jquery

     

Message

  関連記事

jQuery 1.7の on()で要素を削除して追加後もイベントを永続的に引き継ぐ

先日、とある案件である要素にclickイベントを設定していたのですが、削除する必 …

HTML5のWeb Workersで並列処理を使いこなしてみよう!

近年は、html5の台頭によって「html5+css+javascript」によ …

【jQuery】親要素のさらに上の要素を選択したい

とある案件にて、ある要素の親要素のさらに親要素を選択したい時に普通に「paren …

【javascript】マウスホイールで減速するイージングを試してみた

マウスホイールで減速するイージングを試してみた ちょっとjavascriptとj …

no image
jQuery で特定の要素のインデックス番号を取得 ~ツールチップ~

ツールチップを作成してロールオーバーが必要なときに、その要素がインデックスの何番 …

no image
jQuery 簡易アコーディオン

jqueryで簡易アコーディオンを作成してみました。やり方は多々あると思うけども …

【jQuery】スライドコンテンツをjQueryのプラグインで作ってみた!!

以前、作成したjQueryの簡易画像ビュアーのコンテンツバージョンを作成しました …

【JavaScript】連想配列の要素をソートして並び替えてみる

久しぶりにjQueryを業務で弄っています。で、リストの一覧をアルファベット順に …

【jQuery】配列から最大値を求めて、div要素の高さを揃える

よく対象のdiv要素のCSSで「padding-bottom:1000px; m …

html5のlocalStorageで複数のデータを保存するには?

以前、localStorageのデータを保存する方法について記事を書きましたが、 …