获取数据 - 的列表*使用javascript / jQuery的属性 [英] Get list of data-* attributes using javascript / jQuery
问题描述
给定一个任意的HTML元素具有零个或多个数据 - * 属性，一个人如何可以检索数据键 - 值对列表
Given an arbitrary HTML element with zero or more data-* attributes, how can one retrieve a list of key-value pairs for the data.
例如。鉴于这种
<div id='prod' data-id='10' data-cat='toy' data-cid='42'>blah</div>
我希望能够以编程方式检索这样的：
I would like to be able to programmatically retrieve this:
{ "id":10, "cat":"toy", "cid":42 }
使用jQuery（1.4.3），利用访问数据的各个位 $。数据（）是简单，如果键被事先已知的，但它不是明显的一个如何与任意的数据集这样做。
Using jQuery (v1.4.3), accessing the individual bits of data using $.data() is simple if the keys are known in advance, but it is not obvious how one can do so with arbitrary sets of data.
我在找一个简单的jQuery解决方案，如果存在的话，但不会介意，否则一个较低的水平的方法。我在试图解析 $（'＃PROD'）。属性，但我缺乏的JavaScript福是让我失望了个去。
I'm looking for a 'simple' jQuery solution if one exists, but would not mind a lower level approach otherwise. I had a go at trying to to parse $('#prod').attributes but my lack of javascript-fu is letting me down.
的CustomData做什么，我需要的。然而，只是其功能的一小部分似乎包括一个jQuery插件像矫枉过正。
customdata does what I need. However, including a jQuery plugin just for a fraction of its functionality seemed like an overkill.
目测源帮我解决我自己的code（和改进我的javascript-FU）。
Eyeballing the source helped me fix my own code (and improved my javascript-fu).
这是我想出了解决办法：
Here's the solution I came up with:
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'）。数据（）将返回所需的数据字典。
update 2
As demonstrated in the accepted answer, the solution is trivial with jQuery (>=1.4.4). $('#prod').data() would return the required data dict.
推荐答案
其实，如果你使用jQuery，由于版本 1.4.3 提到1.4.4（因为错误的在下面的评论），数据 - * 属性通过支持 。数据（） ：
Actually, if you're working with jQuery, as of version 1.4.3 1.4.4 (because of the bug as mentioned in the comments below), data-* attributes are supported through .data():
在jQuery 1.4.3 HTML 5 数据 -
属性会自动
拉到jQuery的数据对象。
As of jQuery 1.4.3 HTML 5
data-attributes will be automatically pulled in to jQuery's data object.
注意字符串保持不变
而JavaScript的值被转换
到其相关联的值（这
包括布尔，数字，对象，
数组和null）。在数据 -
属性被拉到在第一
时间的数据属性被访问，并
然后不再访问或突变
（所有的数据值被存储
内部jQuery中）。
Note that strings are left intact
while JavaScript values are converted
to their associated value (this
includes booleans, numbers, objects,
arrays, and null). The data-
attributes are pulled in the first
time the data property is accessed and
then are no longer accessed or mutated
(all data values are then stored
internally in jQuery).
的 jQuery.fn.data 函数将返回所有数据 - 对象内的属性作为键盘值对，关键一直是属性名后数据的部分 - 和值一直认为属性后，被转换之后上述规则的价值。
The jQuery.fn.data function will return all of the data- attribute inside an object as key-value pairs, with the key been the part of the attribute name after data- and the value been the value of that attribute after been converted following the rules stated above.
我也创建了一个简单的演示，如果不说服你： http://jsfiddle.net/yijiang/WVfSg/
I've also created a simple demo if that doesn't convince you: http://jsfiddle.net/yijiang/WVfSg/
这篇关于获取数据 - 的列表*使用javascript / jQuery的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
