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

Question

给定一个具有零个或多个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() 将返回所需的数据字典。

Answer 1

实际上，如果您使用 jQuery，从版本 1.4.3 1.4.4 开始（因为下面的 cmets 中提到的错误），data-* 属性通过 @ 支持987654321@：

截至 jQuery 1.4.3 HTML 5 data- 属性会自动 拉入到 jQuery 的数据对象中。

请注意，字符串保持不变 而 JavaScript 值被转换 到它们的相关值（这 包括布尔值、数字、对象、 数组和空）。 data- 属性被拉到第一个 访问数据属性的时间和 然后不再被访问或变异 （然后存储所有数据值 在 jQuery 内部）。

jQuery.fn.data 函数会将对象内的所有data- 属性作为键值对返回，其中键是data- 之后的属性名称部分，值是该属性之后的值按照上述规则进行转换。

如果这不能说服您，我还创建了一个简单的演示：http://jsfiddle.net/yijiang/WVfSg/

Answer 2

还应该提供纯 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));

Answer 3

Have a look here:

如果浏览器也支持 HTML5 JavaScript API，您应该能够通过以下方式获取数据：

var attributes = element.dataset

或

var cat = element.dataset.cat

哦，但我也读到了：

很遗憾，新的数据集属性尚未在任何浏览器中实现，因此最好同时使用getAttribute 和setAttribute，如前所述。

从 2010 年 5 月开始。

---

如果你仍然使用 jQuery，你可能想看看customdata 插件。不过我没有这方面的经验。

Answer 4

如上所述，modern browsers 具有 The 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];});

这样，您可以迭代并使用它们，而无需在元素 like we needed to do before 的所有属性之间进行过滤。

Answer 5

或将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();

Answer 6

您应该通过数据集属性获取数据

var data = element.dataset;

dataset 是获取数据属性的有用工具

Answer 7

您可以像任何其他对象一样遍历数据属性以获取键和值，以下是使用 $.each 的方法：

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

Answer 8

我使用嵌套的each - 对我来说这是最简单的解决方案（易于控制/更改“您对值的操作 - 在我的示例中，输出数据属性为 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

Answer 9

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

}

Answer 10

您可以使用 $('#prod')[0].dataset 访问数据