Liste der Daten- * Attribute mit Javascript/jQuery abrufen

Eine reine JavaScript-Lösung sollte ebenfalls angeboten werden, da die Lösung nicht schwierig ist:

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

Dies ergibt ein Array von Attributobjekten mit den Eigenschaften name und value:

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

Edit: Um noch einen Schritt weiter zu gehen, können Sie ein Wörterbuch erhalten, indem Sie die Attribute iterieren und ein Datenobjekt auffüllen:

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;
    }
});

Sie könnten dann auf den Wert von data-my-value="2" als data.myValue zugreifen.

jsfiddle.net/3KFYf/33

Edit: Wenn Sie Datenattribute für ein Element programmgesteuert aus einem Objekt festlegen möchten, können Sie Folgendes tun:

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

EDIT: Wenn Sie babel oder TypeScript verwenden oder nur für es6-Browser kodieren, ist dies ein guter Ort, um die es6-Pfeilfunktionen zu verwenden, und den Code etwas verkürzen:

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

Schau mal hier :

Wenn der Browser auch die HTML5-JavaScript-API unterstützt, sollten Sie die Daten mit folgenden Informationen erhalten können:

var attributes = element.dataset

oder

var cat = element.dataset.cat

Oh, aber ich lese auch:

Leider wurde die neue Dataset-Eigenschaft noch nicht in einem Browser implementiert. Daher empfiehlt es sich, in der Zwischenzeit getAttribute und setAttribute zu verwenden, wie zuvor gezeigt.

Es ist ab Mai 2010.

Wenn Sie jQuery trotzdem verwenden, sollten Sie sich das customdata plugin ansehen. Ich habe jedoch keine Erfahrung damit.

Wie bereits erwähnt, verfügen moderne Browser über die The HTMLElement.dataset - API.
Diese API gibt Ihnen eine DOMStringMap , und Sie können die Liste der data-*-Attribute einfach abrufen:

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

sie können auch ein Array mit den Schlüsselnamen der Eigenschaft data- abrufen, z

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

oder kartieren Sie seine Werte durch

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];});

und so können Sie diese iterieren und verwenden, ohne zwischen allen Attributen des Elements filtern zu müssen, wie es vor erforderlich war.

oder konvertieren Sie gilly3s hervorragende Antwort auf eine jQuery-Methode:

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

Verwenden von: $('.foo').info();

Sie sollten die Daten über die Datensatzattribute erhalten

var data = element.dataset;

dataset ist ein nützliches Werkzeug zum Abrufen von Datenattributen

Eine Möglichkeit, alle Datenattribute zu finden, ist die Verwendung von element.attributes . Mit .attributes können Sie alle Elementattribute durchlaufen und die Elemente herausfiltern, die die Zeichenfolge "data-" enthalten. 

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;

}

Sie können die Datenattribute wie jedes andere Objekt einfach durchlaufen, um Schlüssel und Werte abzurufen. Gehen Sie dazu wie folgt vor: $.each:

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