jQuery循环遍历HTML5数据属性

时间:2012-09-03 14:29:24

标签: jquery arrays custom-data-attribute

  

可能重复:
  Get list of data-* attributes using javascript / jQuery

我有一系列看起来与此类似的对象:

<a data-type="file" data-path="/some/path" data-size="849858">Link</a>

我想创建一个动态提取每个数据属性的函数,所以如果我添加类似“data-icon”或任何其他数量的属性,该函数仍会返回所有数据属性的数组,如: / p>

{
    "type" : "file",
    "path" : "/some/path",
    ...
}

1 个答案:

答案 0 :(得分:10)

编辑最初建议的答案是您是否需要JSON字符串/对象,我通过问题中的输出字符串推断出来。如果您只想获取键/值对,则可以简单地迭代数据属性集合。

<强> Live Demo

$.each($('a').data(), function(i, v) {
    alert('"' + i + '":"' + v + '",');
});

最初建议回答假设你想要JSON字符串/对象

您可以通过使用data()迭代数据属性集合来创建数据属性的键值对对象(json对象),这将提供数据属性的集合。在创建json字符串之后,我们可以使用$ .parseJSON生成jSON对象,并使用循环从中获取键/值对。

<强> Live Demo

strJson = "{"
$.each($('a').data(), function(i, v) {
    strJson += '"' + i + '":"' + v + '",';
});
strJson = strJson.substring(0, strJson.length - 1);
strJson += '}';
var jsonObject = $.parseJSON( strJson );
for (var key in jsonObject) 
    alert(key + " : " + jsonObject[key]);