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

javascript jquery html attributes

2022-08-30 02:26:37

给定具有零个或多个属性的任意HTML元素，如何检索数据的键值对列表。data-*

例如，给定这个：

<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解决方案（如果存在），但不介意使用较低级别的方法。我尝试过解析，但我缺乏javascript-fu让我失望了。$('#prod').attributes

更新

自定义数据可以满足我的需求。但是，仅针对其功能的一小部分而包含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()

答案 1

实际上，如果您使用的是jQuery，则从~~版本1.4.3~~ 1.4.4开始（由于下面注释中提到的错误），通过.data（）支持属性：data-*

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

请注意，当 JavaScript 值转换为其关联值（包括布尔值、数字、对象、数组和 null）时，字符串保持不变。第一次访问数据属性时，将提取属性，然后不再访问或更改属性（然后所有数据值都存储在 jQuery 内部）。data-

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

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

答案 2

还应该提供纯JavaScript解决方案，因为解决方案并不困难：

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

这给出了一个属性对象数组，这些对象具有和属性：namevalue

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