使用 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)的解决方案很简单。

147916 次浏览
小开

看看这里:

如果浏览器也支持 HTML5 JavaScript API，那么您应该可以通过以下方式获得数据:

var attributes = element.dataset

或者

var cat = element.dataset.cat

哦，但我还看到:

遗憾的是，新的数据集属性尚未在任何浏览器中实现，因此最好按照前面的演示使用 getAttribute和 setAttribute。

是2010年5月的。

如果您使用 jQuery，那么您可能需要查看一下 < strong > customdata 插件。不过我没有这方面的经验。

小开
最佳答案

实际上，如果您使用的是 jQuery，那么从版本 1.4.31.4.4开始(由于下面的注释中提到的 bug) ，data-*属性通过 .data()得到支持:

从 jQuery 1.4.3开始，HTML 5 data- 属性将自动 访问 jQuery 的数据对象。

请注意，字符串保持不变 同时转换 JavaScript 值 它们的相关价值(此 包括布尔型，数字，对象, 数组和 null) 属性在第一个中被提取 访问数据属性的时间和 就不会再被访问或变异 (然后存储所有数据值 在 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;
}

编辑: 更进一步，您可以通过迭代属性和填充数据对象来获得 dictionary:

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));
小开

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

var data = element.dataset;

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

小开

如上所述，现代浏览器具有 < em > HTMLElement.datet 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();

小开

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


}
小开

您可以像其他对象一样迭代数据属性以获得键和值，下面是使用 $.each的方法:

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

我使用嵌套的 每个人-对我来说，这是最简单的解决方案(易于控制/改变“你如何处理值-在我的例子中输出数据属性为 ul-list)(Jquery Code)

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

小开

您可以使用 $(’# prod’)[0] . data 集访问数据


提交答案