Question

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

面向选择的方法（例如$('*').data()）显然不起作用，因为返回值与单个元素相关联。

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

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

JSFiddle

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

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

N.B。我对调试很感兴趣，而不是生产代码。

Answer 1

您可以使用$("body *")选择正文中的每个元素，并将jQuery的.filter()应用于它。工作示例：

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

修改

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

这个变量由一堆对象组成，这些对象包含像“data”或“events”这样的键：

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 =＆gt; dataValue配对：Fiddle

修改

正如评论中所提到的，此解决方案在jQuery版本2.x中不起作用，因为$.cache已被弃用。

我的最后一个建议是为jQuerys数据函数创建一个钩子，以便每次调用$.dataCache = {};时扩展自己的对象data()。通过访问$.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

查找每个元素的data（）键值对

1 个答案: