Получить список атрибутов data- *, используя javascript / jQuery

Question

Если произвольный элемент HTML имеет ноль или более атрибутов data-*, как можно получить список пар ключ-значение для данных.

например. учитывая это:

<div id='prod' data-id='10' data-cat='toy' data-cid='42'>blah</div>

Я хотел бы иметь возможность программно получить это:

{ "id":10, "cat":"toy", "cid":42 }

Используя jQuery (v1.4.3), получить доступ к отдельным битам данных с помощью $.data() просто, если ключи известны заранее, но не очевидно, как это можно сделать с произвольными наборами данных.

Я ищу «простое» решение jQuery, если оно существует, но в противном случае не возражает против подхода более низкого уровня. Я попытался разобрать $('#prod').attributes, но отсутствие javascript-fu подводит меня.

обновление

customdata делает то, что мне нужно. Тем не менее, включение плагина jQuery только для части его функциональности выглядело как излишнее.

Поиск исходного кода помог мне исправить мой собственный код (и улучшил мой javascript-fu).

Вот решение, которое я придумал:

function getDataAttributes(node) {
    var d = {}, 
        re_dataAttr = /^data\-(.+)$/;

    $.each(node.get(0).attributes, function(index, attr) {
        if (re_dataAttr.test(attr.nodeName)) {
            var key = attr.nodeName.match(re_dataAttr)[1];
            d[key] = attr.nodeValue;
        }
    });

    return d;
}

обновление 2

Как показано в принятом ответе, решение тривиально с jQuery (> = 1.4.4). $('#prod').data() вернет требуемые данные.

Answer 1

На самом деле, если вы работаете с jQuery, начиная с версии 1.4.3 1.4.4 (из-за ошибки, упомянутой в комментариях ниже), атрибуты data-* поддерживаются через .data():

Начиная с jQuery 1.4.3 HTML 5 data- атрибуты будут автоматически втянул в объект данных jQuery.

Обратите внимание, что строки остались нетронутыми в то время как значения JavaScript конвертируются к их связанной стоимости (это включает в себя логические, числа, объекты, массивы и ноль). data- атрибуты тянутся в первый время доступа к свойству данных и тогда больше не доступны или не видоизменены (все значения данных затем сохраняются внутренне в jQuery).

Функция jQuery.fn.data вернет все атрибуты data- внутри объекта в виде пар ключ-значение, причем ключ является частью имени атрибута после data-, а значение - значением этого атрибута после быть преобразованным в соответствии с правилами, изложенными выше.

Я также создал простую демонстрацию, если она вас не убеждает: http://jsfiddle.net/yijiang/WVfSg/

Answer 2

Также должно быть предложено чистое решение JavaScript, поскольку решение не сложное:

var a = [].filter.call(el.attributes, function(at) { return /^data-/.test(at.name); });

Это дает массив объектов атрибутов, которые имеют свойства name и value:

if (a.length) {
    var firstAttributeName = a[0].name;
    var firstAttributeValue = a[0].value;
}

Редактировать: Чтобы продвинуться дальше, вы можете получить словарь, перебирая атрибуты и заполняя объект данных:

var data = {};
[].forEach.call(el.attributes, function(attr) {
    if (/^data-/.test(attr.name)) {
        var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
            return $1.toUpperCase();
        });
        data[camelCaseName] = attr.value;
    }
});

Затем вы можетеполучить доступ к значению, например, data-my-value="2" как data.myValue;

jsfiddle.net / 3KFYf / 33

Редактировать: ЕслиВы хотели установить атрибуты данных для вашего элемента программно из объекта, вы могли бы:

Object.keys(data).forEach(function(key) {
    var attrName = "data-" + key.replace(/[A-Z]/g, function($0) {
        return "-" + $0.toLowerCase();
    });
    el.setAttribute(attrName, data[key]);
});

jsfiddle.net / 3KFYf / 34

РЕДАКТИРОВАТЬ: Если вы используете babel или TypeScript или кодируете только для браузеров es6, это хорошее место, чтобы использовать функции стрелок es6 и немного сократить код:

var a = [].filter.call(el.attributes, at => /^data-/.test(at.name));

Answer 3

Посмотрите здесь :

Если браузер также поддерживает HTML5 JavaScript API, вы сможете получить данные с помощью:

var attributes = element.dataset

или

var cat = element.dataset.cat

Да, но я также читаю:

К сожалению, новое свойство набора данных еще не реализовано ни в одном браузере, поэтому пока лучше использовать getAttribute и setAttribute, как показано ранее.

С мая 2010 года.

---

Если вы все равно используете jQuery, возможно, вы захотите взглянуть на плагин customdata . У меня нет с этим опыта.

Answer 4

Как уже упоминалось выше современные браузеры имеют API HTMLElement.dataset .
Этот API дает вам DOMStringMap ,и вы можете получить список атрибутов data-*, просто выполнив:

var dataset = el.dataset; // as you asked in the question

вы также можете получить массив с именами ключей свойства data-, такими как

var data = Object.keys(el.dataset);

или отобразить егозначения на

Object.keys(el.dataset).map(function(key){ return el.dataset[key];});
// or the ES6 way: Object.keys(el.dataset).map(key=>{ return el.dataset[key];});

, и, таким образом, вы можете итерировать их и использовать их без необходимости фильтрации между всеми атрибутами элемента , как мы должны были делать до .

Answer 5

или конвертируйте gilly3 отличный ответ на метод jQuery:

$.fn.info = function () {
    var data = {};
    [].forEach.call(this.get(0).attributes, function (attr) {
        if (/^data-/.test(attr.name)) {
            var camelCaseName = attr.name.substr(5).replace(/-(.)/g, function ($0, $1) {
                return $1.toUpperCase();
            });
            data[camelCaseName] = attr.value;
        }
    });
    return data;
}

Использование: $('.foo').info();

Answer 6

Вы должны получать данные через атрибуты набора данных

var data = element.dataset;

набор данных - полезный инструмент для получения атрибута данных

Answer 7

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

    $.each($('#myEl').data(), function(key, value) {
        console.log(key);
        console.log(value);
    });

Answer 8

Один из способов найти все атрибуты данных - использовать element.attributes.Используя .attributes, вы можете перебирать все атрибуты элемента, отфильтровывая элементы, содержащие строку «data-».

let element = document.getElementById("element");

function getDataAttributes(element){
    let elementAttributes = {},
        i = 0;

    while(i < element.attributes.length){
        if(element.attributes[i].name.includes("data-")){
            elementAttributes[element.attributes[i].name] = element.attributes[i].value
        }
        i++;
    }

    return elementAttributes;

}