使用javascript / jQuery获取data- *属性列表

给定一个具有零个或多个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会让我失望。

更新

customdata可以满足我的需求。但是，仅将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"as 的值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>

Codepen：https：//codepen.io/ezra_siton/pen/GRgRwNw ？ editors = 1111

查找所有数据属性的一种方法是使用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;

}