一尘不染

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

javascript

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


阅读 434

收藏
2020-05-01

共1个答案

一尘不染

实际上,如果您使用的是jQuery,从版本开始 1.4.3
1.4.4(由于以下注释中提到的错误),data-*通过以下方式支持属性.data()

从jQuery 1.4.3开始,HTML 5 data- 属性将自动插入到jQuery的数据对象中。

请注意,当JavaScript值转换为它们的关联值(包括布尔值,数字,对象,数组和null)时,字符串保持不变。的data-
属性被拉到在第一时间中的数据属性被访问,然后不再访问或突变的(所有数据值然后被存储在内部的jQuery)。

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

2020-05-01