给定一个具有零个或多个data-*属性的任意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()如果事先知道键,则使用来访问数据的单个位很简单,但是使用任意数据集如何做到这一点并不明显。
$.data()
我正在寻找一个“简单的”jQuery解决方案(如果存在),但不介意采用较低级别的方法。我可以尝试解析,$('#prod').attributes但是缺少javascript-fu会让我失望。
$('#prod').attributes
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()将返回所需的数据字典。
$('#prod').data()
实际上,如果您使用的是jQuery,从版本开始 1.4.3 1.4.4(由于以下注释中提到的错误),data-*通过以下方式支持属性.data():
.data()
从jQuery 1.4.3开始,HTML 5 data- 属性将自动插入到jQuery的数据对象中。 请注意,当JavaScript值转换为它们的关联值(包括布尔值,数字,对象,数组和null)时,字符串保持不变。的data- 属性被拉到在第一时间中的数据属性被访问,然后不再访问或突变的(所有数据值然后被存储在内部的jQuery)。
从jQuery 1.4.3开始,HTML 5 data- 属性将自动插入到jQuery的数据对象中。
data-
请注意,当JavaScript值转换为它们的关联值(包括布尔值,数字,对象,数组和null)时,字符串保持不变。的data- 属性被拉到在第一时间中的数据属性被访问,然后不再访问或突变的(所有数据值然后被存储在内部的jQuery)。
该jQuery.fn.data函数将data-对象内的所有属性作为键-值对返回,其中键是属性名后面的一部分,data-值是按照上述规则转换后的属性值。
jQuery.fn.data