Найти все атрибуты данных в одном элементе

Question

Кто-нибудь знает быстрый и эффективный способ захвата всех атрибутов данных из одного элемента? Я понимаю, что jQuerys .data() будет делать именно это, однако он не даст мне атрибутов данных, установленных с использованием .attr() UNLESS. Сначала я выбираю атрибут data, используя .data(); Кроме того, вы не можете выбирать элементы по атрибутам данных, которые были добавлены с использованием .data(), что кажется глупым.

HTML

<div data-foo="bar"></div> 

Javascript

$("div").data(); 
//returns {foo:bar} good :) 

$("div").attr("data-hello","world"); 
$("div").data() 
//returns {foo:bar} no good :(

$("div[data-hello]"); 
//returns the div, all good :) 

$("div").data("find","me"); 
$("div[data-find]"); 
//returns nothing, very bad 

Надеемся, что это объясняет

Answer 1

Вы можете использовать dataset свойство в современных браузерах (IE11 + только), но вы можете улучшить решение использовать .attributes для поддержки старых браузеров

var $in = $('input'), 
    input = $in[0], //here input is a dom element reference 
    dataMap = input.dataset; 
//if dataset is not supported 
if (typeof dataMap == 'undefined') { 
    dataMap = {}; 
    $.each(input.attributes, function (key, attr) { 
     var match = attr.name.match(/^data-(.+)/); 
     if (match) { 
      dataMap[match[0]] = attr.value; 
     } 
    }) 
} 
$.each(dataMap, function (key, value) { 
    console.log(key, value) 
}) 

Демо: Fiddle

Answer 2

Различные версии Internet Explorer поддерживают различные функции, которые имеют отношение к этому вопросу. В версии 11 была добавлена ​​поддержка dataset, которая возвращает DOMStringMap имен атрибутов данных (за вычетом части данных) и их соответствующих значений.

В версии 9 и 10, мы можем использовать Array.prototype.slice преобразовать хорошо поддерживаемое attributes коллекции в массив, который мы можем свести к объекту, подобно DOMStringMap.

Мы можем объединить оба этих подхода в одну функцию, которая принимает элемент в качестве аргумента и возвращает объект, как этот {имя: «погладить», «возраст»: 23} для всех данных- атрибуты:

function getDataAttributes (el) { 
    return el.dataset || [].slice.call(el.attributes).reduce(function (o, a) { 
     return /^data-/.test(a.name) && (o[ a.name.substr(5) ] = a.value), o; 
    }, {}); 
} 

Если вам необходима поддержка для Internet Explorer 8 или ниже, вы можете использовать приведенные выше подходы, и просто polyfill Array.prototype.reduce.