[解決済み] javascript / jQueryを使用してdata-*属性のリストを取得します。

質問

任意のHTML要素に0個以上の data-* 属性を持つデータのキーと値のペアのリストを取得するには、どうすればよいのでしょうか。

例）このように与えられた。

<div id='prod' data-id='10' data-cat='toy' data-cid='42'>blah</div>

これをプログラムで取得できるようにしたい。

{ "id":10, "cat":"toy", "cid":42 }

jQuery (v1.4.3) を使って、個々のデータにアクセスするには $.data() は、キーがあらかじめ分かっていれば簡単ですが、任意のデータセットでどのようにできるかは明らかではありません。

もしあれば、「シンプルな」jQueryの解決策を探していますが、そうでなければ、より低レベルのアプローチでも構わないと思っています。をパースすることを試みました。 $('#prod').attributes しかし、私のjavascriptの力のなさに失望しています。

更新

カスタムデータ は、私が必要とするものを提供してくれます。しかし、ほんの一部の機能のためにjQueryプラグインを含めるのはやりすぎのように思えました。

ソースを見ることで、自分のコードを修正することができました（javascriptの腕も上がりました）。

私が思いついた解決策は、こんな感じです。

function getDataAttributes(node) {
    var d = {}, 
        re_dataAttr = /^data\-(.+)$/;

    $.each(node.get(0).attributes, function(index, attr) {
        if (re_dataAttr.test(attr.nodeName)) {
            var key = attr.nodeName.match(re_dataAttr)[1];
            d[key] = attr.nodeValue;
        }
    });

    return d;
}

アップデート2

受理された回答で示されたように、jQuery (>=1.4.4) を使えば、解決は簡単です。 $('#prod').data() は、必要なデータのディクショ ンを返します。

解決方法は？

実は、jQueryを使用している場合、バージョンとして 1.4.3 1.4.4（下のコメントにあるようなバグがあるため）。 data-* 属性は .data() :

jQuery 1.4.3時点 HTML 5 data- 属性は自動的に jQueryのデータオブジェクトに引き込まれます。

文字列はそのままであることに注意してください 一方、JavaScriptの値は を関連する値に変換します（これは これには、ブール値、数値、オブジェクトが含まれます。 配列、NULL)。また data- 属性は最初の データプロパティがアクセスされたとき、そして その後、アクセスや変異が行われることはありません。 (すべてのデータ値はその後 jQueryの内部で)。

は jQuery.fn.data 関数は、すべての data- 属性はキーと値のペアで、キーは属性名で data- であり、値は上記のルールに従って変換された後の属性値である。

また、簡単なデモも作ってみましたので、これで納得していただけない方はご覧ください。 http://jsfiddle.net/yijiang/WVfSg/