Поиск данных() пар ключ-значение для каждого элемента

Что это лучший способ, чтобы просмотреть все JQuery data пар ключ-значение через каждый элемент (в JQuery 2.x)?

Подход, ориентированный на выбор (например, $('*').data()), очевидно, не работает, потому что возвращаемое значение привязывается к одному элементу.

Я знаю, что я могу перебирать каждый элемент, проверяя каждый для данных:

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

JSFiddle

Это приводит к ожидаемому результату, но повторение каждого возможного ключа данных похоже на обратный подход к этой проблеме.

Есть ли способ найти все данные элемента напрямую?

NB Я заинтересован в отладке, а не в производственном коде.

1 ответ

Вы можете выбрать каждый элемент в теле с помощью $("body *") и применить к нему jQuery .filter(). Рабочий пример:

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

редактировать

Как упоминалось ранее в @spokey, внутри объекта 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;
 });

Здесь рабочий пример плюс функция для объединения этого материала в один и более удобный объект, состоящий только из данныхKey => dataValue: Fiddle

редактировать

Как упоминалось в комментариях, это решение не работает в jQuery версии 2.x, так как $.cache устарел.

Мое последнее предложение - создать крючок для функции данных jQuerys, чтобы расширить собственный объект $.dataCache = {}; каждый раз вызывается data(). Расширение, замена или добавление функций jQuerys осуществляется путем доступа к $.fn.functionName:

$.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

licensed under cc by-sa 3.0 with attribution.