jQuery 循环遍历 data() 对象

Posted 2023-02-22

【中文标题】jQuery 循环遍历 data() 对象

【英文标题】：jQuery loop through data() object

【发布时间】：2010-10-20 19:58:29

【问题描述】：

是否可以循环遍历data() 对象？

假设这是我的代码：

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

我该如何循环呢？ each()可以用这个吗？

【参考方案1】：

我认为没有任何函数可以为您提供使用 data() 函数添加的数据的所有“键”，但是，为什么不将所有数据放入下面的函数中一个对象/地图？

类似这样的：

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

然后当你想读取数据/遍历它时：

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);

【参考方案2】：

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

jQuery.fn.allData = function() 
    var intID = jQuery.data(this.get(0));
    return(jQuery.cache[intID]);
;

有了这个，你可以这样做：

$('#myelement').data('test1','yay1')
               .data('test2','yay2')
               .data('test3','yay3');

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

您可以只使用 matt b 的建议，但这就是您现在所拥有的方法。

【讨论】：

如果是内部变量，在jquery的后续版本中是不是会发生变化（可能不另行通知）？

我相信他们可以，但我不确定他们为什么会。他们可能对数据功能进行的任何重组都可能包含内置的此功能。我不认为这是回避它的真正正当理由，但我想这是一个需要牢记的问题。

【参考方案3】：

$.each($.data(this), function(i, e) 
   alert('name='+ i + ' value=' +e);
);

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

【讨论】：

这对我来说 OOTB 不起作用，我不得不稍微修改一下：$.each($('#mydiv').data(), function (i, e) alert(i + ":" + e); );

【参考方案4】：

使用 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);
);

【参考方案5】：

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

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

然后你可以简单地用值 id 扩展

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

【参考方案6】：

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

如果 .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>

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

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

OutPut :

Monday
Tuesday
Wednesday
Thursday

注意：在浏览器控制台中，它返回特定的<DIV>。