jQuery 循环遍历 data() 对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/772608/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery loop through data() object
提问by bart
Is it possible to loop through a data()object?
是否可以遍历data()对象？
Suppose this is my code:
假设这是我的代码：
$('#mydiv').data('bar','lorem');
$('#mydiv').data('foo','ipsum');
$('#mydiv').data('cam','dolores');
How do I loop through this? Can each()be used for this?
我如何遍历这个？可以each()用于此吗？
采纳答案by Paolo Bergantino
jQuery stores all the data information in the jQuery.cache internal variable. It is possible to get all the data associated with a particular object with this simple but helpful plugin:
jQuery 将所有数据信息存储在 jQuery.cache 内部变量中。可以使用这个简单但有用的插件获取与特定对象关联的所有数据：
jQuery.fn.allData = function() {
var intID = jQuery.data(this.get(0));
return(jQuery.cache[intID]);
};
With this in place, you can do this:
有了这个，你可以这样做：
$('#myelement').data('test1','yay1')
.data('test2','yay2')
.data('test3','yay3');
$.each($('#myelement').allData(), function(key, value) {
alert(key + "=" + value);
});
You could just use matt b's suggestion but this is how to do it with what you have right now.
你可以只使用 matt b 的建议，但这是如何用你现在拥有的东西来做的。
回答by John Strickler
$.each($.data(this), function(i, e) {
alert('name='+ i + ' value=' +e);
});
This will iterate through each property in 'this' element's data object.
这将遍历“this”元素的数据对象中的每个属性。
回答by Mikael Svenson
Tested with jQuery 1.4 and tips from @user292614 the following works:
使用 jQuery 1.4 和来自 @user292614 的提示进行测试，结果如下：
$('#mydiv').data('bar','lorem');
$('#mydiv').data('foo','ipsum');
$('#mydiv').data('cam','dolores');
$.each( $('#mydiv').data(),function(i, e) {
alert('name='+ i + ' value=' +e);
});
回答by matt b
I don't think that there is any function that gives you all of the "keys" of the data that has been added with the data()function, but instead, why not put all of your data into the function under an object / map?
我认为没有任何函数可以为您提供随data()函数添加的数据的所有“键” ，但是，为什么不将所有数据放入对象/映射下的函数中？
something like this:
像这样：
var container = new Object();
container.bar = "lorem";
container.foo = "ipsum";
container.cam = "dolores";
$("mydiv").data("container", container);
and then when you want to read the data / iterate through it:
然后当你想读取数据/遍历它时：
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);
}
回答by Marthin
I just tried this but needed some extra data values. If you also got this "problem" then the following should work.
我刚试过这个，但需要一些额外的数据值。如果您也遇到了这个“问题”，那么以下应该可以工作。
$('#mydiv').data('bar', {name:'lorem', id:'156', price:'199'});
then you can simply extend with the value id
那么您可以简单地使用值 id 进行扩展
$.each( $('#mydiv').data(),function(i, e) {
alert('name='+ i + ' name=' +e.name + ' id='e.id + ' price=' + e.price );
});
回答by Vrushal Raut
If we use .data() means it store arbitrary data associated with the matched elements or return the value at the named data store for the first element in the set of matched elements.
如果我们使用 .data() 意味着它存储与匹配元素关联的任意数据，或者返回匹配元素集中第一个元素的命名数据存储中的值。
and if .data() in loop so we have to access it same manner in loop so for e.g(below)
如果 .data() 在循环中，所以我们必须在循环中以相同的方式访问它，例如（下面）
<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>
The html in my loop and data-todayis same in all tags but their values are different so basically it is loop generated htmlso we have to access in same manner i.e loop in js/jQueryfor e.g. (below jQuery code)
我循环中的 html 在data-today所有标签中都相同，但它们的值不同，所以基本上它是循环生成的，html所以我们必须以相同的方式访问，即循环js/jQueryfor 例如(below jQuery code)
$('.weekday').each(function(){
$(this).data('today');
});
$('.weekday').each(function(){
$(this).data('today');
});
OutPut :
OutPut :
Monday
Tuesday
Wednesday
Thursday
NOTE : In browser console it return particular <DIV>.
注意：在浏览器控制台中，它返回特定的<DIV>.
