使用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解决scheme（如果存在的话），但不会介意较低级别的方法。 我试图parsing$('#prod').attributes但是我缺lessjavascript-fu让我失望。
更新
customdata做我需要的。 然而，包括一个jQuery插件只是为了其function的一小部分，似乎是一个矫枉过正。
目光的源头帮助我修复了自己的代码（并改进了我的javascript-fu）。
这是我提出的解决scheme：
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
正如在接受的答案中所表明的那样，解决scheme对于jQuery（> = 1.4.4）来说是微不足道的。 $('#prod').data()将返回所需的数据字典。
其实，如果你正在使用jQuery，就像版本一样 1.4.3 1.4.4（由于下面的注释中提到的错误），通过.data()支持data-*属性：
从jQuery 1.4.3开始，HTML 5
data-属性将被自动引入到jQuery的数据对象中。请注意，当JavaScript值转换为相关值（包括布尔值，数字，对象，数组和空值）时，string保持不变。
data-属性在访问数据属性的第一次被拉出，然后不再被访问或变异（所有的数据值然后被内部存储在jQuery中）。
jQuery.fn.data函数将返回对象内的所有data-属性作为键值对，关键字是data-之后的属性名称的一部分，并且该值是被转换后的该属性的值上述规定。
我也创build了一个简单的演示，如果不能说服你： http : //jsfiddle.net/yijiang/WVfSg/
应该提供纯粹的JavaScript解决scheme，因为解决scheme并不困难：
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.myValue访问data-my-value="2" 。
jsfiddle.net/3KFYf/33
编辑：如果你想从一个对象编程设置元素的数据属性，你可以：
Object.keys(data).forEach(function(key) { var attrName = "data-" + key.replace(/[AZ]/g, function($0) { return "-" + $0.toLowerCase(); }); el.setAttribute(attrName, data[key]); });
jsfiddle.net/3KFYf/34
编辑：如果你使用babel或TypeScript，或只编写es6浏览器，这是一个很好的地方使用es6箭头function，并缩短了一下代码：
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- property的键名来检索一个数组
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];});
像这样你可以迭代这些并使用它们，而不需要在元素的所有属性之间进行过滤， 就像我们之前需要做的那样 。
您应该通过数据集属性获取数据
var data = element.dataset;
数据集是获取数据属性的有用工具
或者将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() ;
