jQuery.data()やjQuery.fn.data()を 使うと要素(やオブジェクト)ごとに Key-Value の形でデータを 保存することが出来ます。 また、jQuery.fn.data()では HTML 属性 data-* の値を取得することができます。 この属性 data-* まわりの処理のためか、 キーにダッシュ(-)が含まれている場合、 処理に一貫性が無くなり、1.x 系と 2.x 系で振る舞いが 異なる箇所も出てきます。

そのようなわけで、キーにダッシュが含まれている場合に どのような振る舞いになるのかを調べてみましたが、 キーにダッシュを含めなければいい話なので、 元々キーにダッシュを含めていない人は もうこれ以降読む必要が無いかもしれません。

主に jQuery 2.1.0 と 1.11.0 (あとおざなりに 2.0.3, 1.10.2, 1.9.1) を使って調べたので、他のバージョンでは 当てはまらないことがあるかもしれませんのでご注意下さい。

• jQuery.fn.data()での取り扱い
  • jQuery.fn.data( key, value )の場合
  • jQuery.fn.data( obj )の場合
  • jQuery.fn.data( key )の場合
• jQuery.data()での取り扱い
  • jQuery.data( elem, key, value )の場合
  • jQuery.data( elem, obj )の場合
  • jQuery.data( elem, key )の場合
• jQuery.removeData(), jQuery.fn.removeData()での取り扱い
  • 一つのキーを削除する場合(.removeData(key))
  • 複数のキーを削除する場合 (.removeData([key1, key2, ...]), .removeData("key1 key2 ..."))
• まとめ
• おまけ：データを空にしたときの注意点

続きを読む