$el.data('xxxx') と $el.attr('data-xxxx') の違いでハマりがちなこと

わかったつもりで地味にハマったメモです。

概要としては、
jQuery.fn.data で値をセットすること と HTML要素に data-xxxxが付与されること
は イコールではない ということです。

jQuery.fn.data の基本的な使い方

<p data-hoge="fuga"></p>

先にHTMLがあり、　これの futa を jQueryで取得する場合、次のようにすると取得できる。

var hoge = $('p').data('hoge');
console.log(hoge); // => 'fuga'

で、データを更新したいときはセッターとして次の用にすればいい。

$('p').data('fuga', 'bar');

問題になるケース

<p></p>

$('p').data('hoge', 'bar');
...
var hoge = $('p').data('hoge');
console.log(hoge); // => 'fuga'

しかし、このあとでセレクタによる取得をしようとすると、

$('p[data-hoge=fuga]').text('bar');
// => できない

という事が起こります。

まとめ

jQuery.fn.data は対象の要素にエキストラなデータを保持させることができ、HTMLの属性値でマッチするものがあればそちらを利用できるように作られています。
しかし、 $hoge.data('fuga', 'bar') Key・Valueを付与することが data-fuga="bar" のようにHTMLの属性を追加する処理ではないという勘違いがあったという話です。

このためDOMの属性値を介して処理をおこなうようなつくりにする場合は注意が必要です。
次のようにHTML側に値をもたせるようにすればOKとなります。

$('p').attr('data-hoge', 'bar');

var hoge = $('p').data('hoge');
console.log(hoge); // => 'fuga'
$('p[data-hoge=fuga]').text('bar');
// => できる

※この手の設計がエレガントかどうかは別問題ですが。