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

  • Z时代
  • 2024-01-10
  • 分类：问答

给定一个具有零个或多个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;
}

回答：

如公认的答案所示，该解决方案对于jQuery（> = 1.4.4）而言是微不足道的。$('#prod').data()将返回所需的数据字典。

回答：

实际上，如果您使用的是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-值是按照上述规则转换后的属性值。

以上是 使用javascript / jQuery获取data- *属性列表 的全部内容， 来源链接： utcz.com/qa/407919.html

回到顶部