Найти пары ключ-значение data() для каждого элемента

Каков наилучший способ просмотреть все 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 *") и примените к нему jfuery 's .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;
    });

Вот рабочий пример плюс функция для объединения этого материала в один и более удобный объект, состоящий только из пар dataKey => 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

Другие вопросы по тегам