jQuery循环遍历data（）对象


jQuery loop through data() object

是否可以循环通过data()对象？

假设这是我的代码：

1
2
3
$('#mydiv').data('bar','lorem');  
$('#mydiv').data('foo','ipsum');  
$('#mydiv').data('cam','dolores');

我如何循环通过这个？可以用each()来做这个吗？

1
2
3
$.each($.data(this), function(i, e) {
   alert('name='+ i + ' value=' +e);
});

这将遍历"this"元素的数据对象中的每个属性。

相关讨论

jquery将所有数据信息存储在jquery.cache内部变量中。使用这个简单但有用的插件可以获取与特定对象相关联的所有数据：

1
2
3
4
jQuery.fn.allData = function() {
    var intID = jQuery.data(this.get(0));
    return(jQuery.cache[intID]);
};

有了它，您可以做到：

1
2
3
4
5
6
7
$('#myelement').data('test1','yay1')
               .data('test2','yay2')
               .data('test3','yay3');

$.each($('#myelement').allData(), function(key, value) {
    alert(key +"=" + value);
});

你可以利用马特B的建议，但这就是如何利用你现在拥有的东西。

相关讨论

通过jquery 1.4和@user292614的提示进行测试，可以实现以下功能：

1
2
3
4
5
6
7
$('#mydiv').data('bar','lorem');  
$('#mydiv').data('foo','ipsum');  
$('#mydiv').data('cam','dolores');

$.each( $('#mydiv').data(),function(i, e) {
   alert('name='+ i + ' value=' +e);
});

我不认为有任何函数可以为您提供随data()函数添加的所有数据的"键"，但是，为什么不将所有数据放入对象/映射下的函数中呢？

像这样：

1
2
3
4
5
var container = new Object();
container.bar ="lorem";
container.foo ="ipsum";
container.cam ="dolores";
$("mydiv").data("container", container);

然后，当您想要读取数据/遍历它时：

1
2
3
4
5
6
var blah = $("mydiv").data("container");
for(key in blah) {
    var value = blah[key];
    //do whatever you want with the data, such as:
    console.log("The value of", key," is", value);
}

如果我们使用.data()意味着它存储与匹配元素关联的任意数据，或者返回匹配元素集中第一个元素的命名数据存储处的值。

如果.data()在循环中，那么我们必须以同样的方式在循环中访问它，例如(下面)

1
2
3
4
5
6
7
8
<p class="weekday" data-today="monday">Monday
</p>
<p class="weekday" data-today="tuesday">Tuesday
</p>
<p class="weekday" data-today="wednesday">Wednesday
</p>
<p class="weekday" data-today="thursday">Thursday
</p>

我的循环和data-today中的html在所有标记中都是相同的，但它们的值不同，所以基本上它是循环生成的html，所以我们必须以同样的方式访问，即在js/jQuery中循环，例如(below jQuery code)。

$('.weekday').each(function(){
$(this).data('today');
});

OutPut :

1
2
3
4
Monday
Tuesday
Wednesday
Thursday

注：在浏览器控制台中返回特定的

。

我刚试过，但需要一些额外的数据值。如果您也遇到了这个"问题"，那么下面的内容应该可以工作。

1
$('#mydiv').data('bar', {name:'lorem', id:'156', price:'199'});

然后您可以简单地使用值id进行扩展

1
2
3
$.each( $('#mydiv').data(),function(i, e) {
   alert('name='+ i + ' name=' +e.name + ' id='e.id + ' price=' + e.price );
});