为每个元素查找data(）键值对

Find data() key-value pairs for every element

本文关键字：键值对 data 查找 元素      更新时间：2023-09-26

查看每个元素(在jQuery 2.x中(中所有jQuery data键值对的最佳方式是什么？

面向选择的方法(例如$('*').data()(显然不起作用，因为返回值绑定到单个元素。

我知道我可以迭代每个元素，检查每个元素的数据：

var allData = [];
$('html *').each(function() {
    if($.hasData(this)) {
        allData.push({ el: this, data: $(this).data() })
    }
})

JSFiddle

这确实产生了预期的输出，但对每个可能的数据键进行迭代感觉像是解决这个问题的向后方法。

有没有办法直接找到所有元素数据？

注意：我感兴趣的是调试，而不是生产代码。

您可以使用$("body *")选择主体中的每个元素，并对其应用jQuery的.filter((。工作示例：

var $elementsContainingData $("body *").filter(function() {
    if($.hasData(this)) return this;  
});
console.log($elementsContainingData);

编辑

正如@speary之前提到的，jQuery对象中有一个名为"cache"的内部变量：$.cache。

这个变量由一组包含"数据"或"事件"等键的对象组成：

5: Object
data: Object
events: Object
handle: function (a){return typeof m===K||a&&m.event.triggered===a.type?void     0:m.event.dispatch.apply(k.elem,arguments)}
__proto__: Object

您可以遍历该对象并过滤数据：

var filteredCache = $.each($.cache,function() {
        if(typeof this["data"] === "object") return this;
    });

这里有一个工作示例，加上一个函数，可以将这些东西合并到一个更方便的对象中，该对象仅由dataKey=>dataValue配对组成：Fiddle

编辑

如注释中所述，由于$.cache已弃用，因此此解决方案在jQuery 2.x版本中不起作用。

我的最后一个建议是为jQuerys数据函数创建一个钩子，以便在每次调用data()时扩展自己的对象$.dataCache = {};。通过访问$.fn.functionName:来扩展、替换或添加jQuerys函数

$.fn.data = function(fn,hook) {
    return function() {
        hook.apply(this,arguments);
        return fn.apply(this,arguments);
    }
}($.fn.data,function(key,value) {
    var objReturn = {};
    objReturn[key] = value;
    $.extend($.dataCache,objReturn);
});

这在jQuery版本2:Fiddle

中也很有效
相关文章：