javascript / jQueryを使用してdata- *属性のリストを取得する

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

例えばこれを与えられた：

<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-fuの欠如は私を失望させています。

更新

カスタムデータは必要なことを行います。ただし、jQueryプラグインをその機能の一部にのみ含めることは、やり過ぎのように思えました。

ソースを目視することで、自分のコードを修正することができました（そして、javascript-fuを改善しました）。

これが私が思いついた解決策です：

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.31.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/

ソリューションは難しくないので、純粋なJavaScriptソリューションも提供する必要があります。

var a = [].filter.call(el.attributes, function(at) { return /^data-/.test(at.name); });

これにより、属性オブジェクトの配列が得られます。 nameおよびvalueプロパティを：

if (a.length) {
    var firstAttributeName = a[0].name;
    var firstAttributeValue = a[0].value;
}

編集：さらに一歩進めるために、属性を反復してデータオブジェクトにデータを入力することにより、辞書を取得できます。

var data = {};
[].forEach.call(el.attributes, function(attr) {
    if (/^data-/.test(attr.name)) {
        var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
            return $1.toUpperCase();
        });
        data[camelCaseName] = attr.value;
    }
});

次に、たとえばの値にアクセスできます。 data-my-value="2"ようdata.myValue、

jsfiddle.net/3KFYf/33

編集：オブジェクトからプログラムで要素のデータ属性を設定したい場合は、次のことができます。

Object.keys(data).forEach(function(key) {
    var attrName = "data-" + key.replace(/[A-Z]/g, function($0) {
        return "-" + $0.toLowerCase();
    });
    el.setAttribute(attrName, data[key]);
});

jsfiddle.net/3KFYf/34

編集： babelまたはTypeScriptを使用している場合、またはes6ブラウザーのみをコーディングしている場合、これはes6矢印関数を使用し、コードを少し短くするのに最適な場所です。

var a = [].filter.call(el.attributes, at => /^data-/.test(at.name));

ここを見てください：

ブラウザーがHTML5 JavaScript APIもサポートしている場合は、次の方法でデータを取得できます。

var attributes = element.dataset

または

var cat = element.dataset.cat

ああ、でも私も読んだ：

残念ながら、新しいデータセットのプロパティはまだ、任意のブラウザで実装されていないので、その間にそれを使用するのがベストだgetAttributeとsetAttribute以前示されたように。

2010年5月からです。

とにかくjQueryを使用している場合は、customdataプラグインを確認することをお勧めします。私はそれを使った経験はありません。

上記のように、最近のブラウザーにはHTMLElement.dataset APIがあります。
このAPIはDOMStringMapを提供し、data-*属性のリストを取得するには、次のようにします。

var dataset = el.dataset; // as you asked in the question

次のdata-ようなプロパティのキー名で配列を取得することもできます

var data = Object.keys(el.dataset);

またはその値をマッピングします

Object.keys(el.dataset).map(function(key){ return el.dataset[key];});
// or the ES6 way: Object.keys(el.dataset).map(key=>{ return el.dataset[key];});

以前と同じように、要素のすべての属性をフィルタリングする必要なく、これらを反復して使用できます。

またはgilly3の優れた答えをjQueryメソッドに変換します。

$.fn.info = function () {
    var data = {};
    [].forEach.call(this.get(0).attributes, function (attr) {
        if (/^data-/.test(attr.name)) {
            var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
            data[camelCaseName] = attr.value;
        }
    });
    return data;
}

使用：$('.foo').info();

データセット属性を介してデータを取得する必要があります

var data = element.dataset;

データセットは、データ属性を取得するための便利なツールです

他のオブジェクトと同様にデータ属性を反復処理してキーと値を取得できます。これを行う方法は$.each次のとおりです。

    $.each($('#myEl').data(), function(key, value) {
        console.log(key);
        console.log(value);
    });

私はネストされたそれぞれを使用しています -私にとってはこれが最も簡単な解決策です（「値を使って何をするかを制御/変更するのは簡単です-私の例では出力データ属性としてul-list）（Jqueryコード）

var model = $(".model");

var ul = $("<ul>").appendTo("body");

$(model).each(function(index, item) {
  ul.append($(document.createElement("li")).text($(this).text()));
  $.each($(this).data(), function(key, value) {
    ul.append($(document.createElement("strong")).text(key + ": " + value));
    ul.append($(document.createElement("br")));
  }); //inner each
  ul.append($(document.createElement("hr")));
}); // outer each

/*print html*/
var htmlString = $("ul").html();
$("code").text(htmlString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="demo"></h1>

<ul>
  <li class="model" data-price="45$" data-location="Italy" data-id="1234">Model 1</li>
  <li class="model" data-price="75$" data-location="Israel" data-id="4321">Model 2</li> 
  <li class="model" data-price="99$" data-location="France" data-id="1212">Model 3</li> 
</ul>

<pre>
<code class="language-html">
  
</code>
</pre>

<h2>Generate list by code</h2>
<br>

コードペン：https ://codepen.io/ezra_siton/pen/GRgRwNw?editors=1111

すべてのデータ属性を見つける1つの方法は、を使用することelement.attributesです。を使用すると.attributes、すべての要素属性をループして、文字列「data-」を含むアイテムを除外できます。

let element = document.getElementById("element");

function getDataAttributes(element){
    let elementAttributes = {},
        i = 0;

    while(i < element.attributes.length){
        if(element.attributes[i].name.includes("data-")){
            elementAttributes[element.attributes[i].name] = element.attributes[i].value
        }
        i++;
    }

    return elementAttributes;

}