このメソッドにより、DOM要素に以前関連付けられたデータを読み取ることができます。 1 つの要素に対して複数の異なる値を 1 つずつ、またはセットとして取得することができます。
1
2
3
4
5
6
7
|
|
パラメータなしで.data()
を呼び出すと、格納された各値をプロパティとして含むJavaScriptオブジェクトが返されます。 オブジェクトは、データ値を取得するために直接使用できます (ただし、もともとダッシュを含むプロパティ名は、後述のように修正されていることに注意してください)。
jQuery 3 以降、キー内の小文字 ASCII 文字に続く「-」 (U+002D) のすべての 2 文字のシーケンスは、HTML データセット API と一致して、文字の大文字バージョンに置換されます。 $( "body" ).data( { "my-name": "aValue" } ).data();
のような記述は { myName: "aValue" }
を返します。
HTML5 data-*
属性
jQuery 1.4.3 からは、data-*
属性が jQuery データの初期化に使用されるようになりました。 要素の data-*
属性は、data()
メソッドが最初に呼び出されたときに取得され、その後はアクセスも変更もされません (すべての値は jQuery によって内部に保存されます)。
属性の文字列値を JavaScript 値に変換しようと試みます (boolean, 数字、オブジェクト、配列、null を含みます)。 文字列は、変換しても表現が変わらない場合にのみ数値に変換されます(例えば、文字列 “100” は数値 100 に変換されますが、数値 100 は “100” にシリアライズされるため、”1E02″ と “100.000” は文字列のまま残されます)。 文字列が'{‘または'[‘で始まる場合、jQuery.parseJSON
を使用してパースします。
data-*
属性値を変換されていない文字列として取得するには、attr()
メソッドを使用します。
jQuery 1.6 から、data-*
属性名のダッシュは HTML データセット API と一致するように処理されるようになりました。
たとえば、次の HTML が与えられた場合:
1
|
|
次の比較はすべて真となります。
1
2
3
4
|
|