[jQuery]dataメソッドについて

大分前にjqueryのdataメソッドについて書きましたが、attrメソッド経由で操作するのと、dataメソッド経由で操作するのとでは若干挙動が違うみたいなので、まとめてみた。

<script type="text/javascript">
jQuery(function(){

  console.log($('div').attr('data-foo')) //undefined
  $('div').attr('data-foo',1);
  console.log($('div').attr('data-foo')) //1
  console.log($('div').data('foo'))      //1

  $('div').data('foo',2);
  console.log($('div').attr('data-foo')) //1
  console.log($('div').data('foo'))      //2
});
</script>
<div ></div>

attrメソッドを使って書き換えた場合、dataメソッドで取得する側にも値が反映されるが、dataメソッド経由で値を設定した場合、attrメソッドの場合と結果が変わってしまう場合がある。

これは注意したいなー。

参考
jQueryのカスタムデータ属性(data-*)の設定/取得の挙動が思ったのと違った件