[jQuery] jQuery の data() メソッドと attr() メソッドの違い

data-xxxxx属性(独自データ属性)まわり。

data メソッドの振る舞い

jQuery: 特定の要素に関連付くデータを取得/設定するには?(data) – Build Insider より。

  • dataメソッドとは、現在の要素に対して任意のデータ(本稿では、便宜上、内部データと呼びます)を設定/取得するためのメソッドです。
  • dataメソッドは、あくまでjQuery内部で要素とデータのひも付けを管理するものだからです。
  • もっと言うと、 dataメソッドは取得時に指定されたキーで内部データが見つからなかった場合にだけ、data-xxxxx属性を参照します。

故に下記のサンプル(#data1, #data2)のように data() メソッドと attr() メソッドで振る舞いに違いが出る。

See the Pen jQuery data() vs attr() 1/2 by DriftwoodJP (@DriftwoodJP) on CodePen.

このあたりが分かりづらいのは jQuery の data() メソッドが作られた後に、HTML の data-xxx 属性が作られたという歴史的経緯があるそう。

data メソッドは値をキャッシュする

jQuery: 特定の要素に関連付くデータを取得/設定するには?(data) – Build Insider より。

  • dataメソッドが独自データ属性の値を見にいくのは、あくまで内部データとして管理されているキーがまだ存在しない場合だけです。

故に上述のサンプル(#data3)のように、attr() メソッドで書き換えた独自データ属性(data-xxx)を data() メソッドで取得しても値は変わっていない。
キャッシュされた値を持ったままとなる。

再設定が必要な場合の手段

上述のような点に留意しないとはまる。
下記のような手段が必要になる。

参考。

data メソッドはデータ型を認識する

jQuery: 特定の要素に関連付くデータを取得/設定するには?(data) – Build Insider より。

  • dataメソッド で取得した値を$.typeメソッドで判定してみると、 文字列/数字だけでなく、配列/オブジェクトも正しく認識している 点に注目です。
  • attrメソッドは全ての属性を文字列として扱います。

独自データ属性として数値/文字列/配列/オブジェクトなどを指定した例。

See the Pen jQuery data() vs attr() 2/2 by DriftwoodJP (@DriftwoodJP) on CodePen.

補遺

JavaScript逆引きレシピ jQuery対応
山田 祥寛
翔泳社
売り上げランキング: 126,405

.data() | jQuery API Documentation
.attr() | jQuery API Documentation