jQueryのdataメソッドでdata属性を扱うときの注意

HTML5のカスタムデータ属性に値を操作しようとしたときに、jQueryのdataメソッドをつかうと期待と違う動作をするときがあります。

JavaScript

(function(win, doc, $) {

    "use strict";
    
    var $div = $("div");
    
    console.log($div.data("msg")); // => hello
    console.log($div.attr("data-msg")); // => hello
    
    $div.data({"msg": "hey"});
    $div.attr({"data-msg": "say"});

    console.log($div.data("msg")); // => hey
    console.log($div.attr("data-msg")); // => say
    
})(this, document, $);

DEMO

dataメソッドはDOMとデータを結びつけて管理してくれるメソッドですが、data属性を操作するメソッドではないからです。
dataメソッドで操作したデータはDOMに反映されること無く、メモリ上に保管されるようです。
data属性を操作したい場合はattrメソッドをつかいましょう。

---

https://twitter.com/ki_230/status/651331561338441729

ツイッターやってます！