.data()

このメソッドにより、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

コメントを残す

メールアドレスが公開されることはありません。