wake-up-neo.net

Liste der Daten- * Attribute mit Javascript/jQuery abrufen

Wie kann man für ein beliebiges HTML-Element mit null oder mehr data-*-Attributen eine Liste von Schlüssel-Wert-Paaren für die Daten abrufen?.

Z.B. das gegeben:

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

Ich möchte dies programmgesteuert abrufen können:

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

Mit jQuery (v1.4.3) ist der Zugriff auf die einzelnen Datenbits mit $.data() einfach, wenn die Schlüssel vorab bekannt sind. Es ist jedoch nicht offensichtlich, wie dies mit beliebigen Datensätzen möglich ist.

Ich bin auf der Suche nach einer "einfachen" jQuery-Lösung, falls vorhanden, würde aber ansonsten einen Ansatz auf unterer Ebene nicht stören. Ich habe versucht, $('#prod').attributes zu analysieren, aber mein Mangel an Javascript-Fu lässt mich im Stich.

aktualisieren

customdata macht was ich brauche. Das Einfügen eines jQuery-Plugins nur für einen Bruchteil seiner Funktionalität erschien jedoch wie ein Overkill. 

Durch den Blick auf die Quelle konnte ich meinen eigenen Code korrigieren (und mein Javascript-Fu verbessern).

Hier ist die Lösung, die ich mir ausgedacht habe:

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

update 2

Wie in der akzeptierten Antwort gezeigt, ist die Lösung mit jQuery trivial (> = 1.4.4). $('#prod').data() würde das erforderliche Datendiktat zurückgeben.

139
Shawn Chin

Eigentlich, wenn Sie mit jQuery arbeiten, ab Version 1.4.3 1.4.4 (wegen des in den folgenden Kommentaren erwähnten Fehlers) werden data-*-Attribute durch .data() unterstützt: 

Stand jQuery 1.4.3 HTML 5 data- Attribute werden automatisch in das Datenobjekt von jQuery aufgenommen.

Beachten Sie, dass Zeichenfolgen intakt bleiben während JavaScript-Werte konvertiert werden auf den zugehörigen Wert (dieser enthält Booleans, Zahlen, Objekte, Arrays und Null). Das data- Attribute werden im ersten .__ gezogen. Zeit, auf die auf die Dateneigenschaft zugegriffen wird, und dann wird nicht mehr darauf zugegriffen oder mutiert (Alle Datenwerte werden dann intern in jQuery gespeichert ).

Die jQuery.fn.data-Funktion gibt das gesamte data--Attribut innerhalb eines Objekts als Schlüssel-Wert-Paare zurück, wobei der Schlüssel der Teil des Attributnamens nach data- ist und der Wert dieses Attributs ist, nachdem er nach den oben angegebenen Regeln konvertiert wurde. 

Ich habe auch eine einfache Demo erstellt, wenn Sie das nicht überzeugt: http://jsfiddle.net/yijiang/WVfSg/

92
Yi Jiang

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));
75
gilly3

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.

18
Felix Kling

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.

5
Sergio

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

3
PHPst

Sie sollten die Daten über die Datensatzattribute erhalten

var data = element.dataset;

dataset ist ein nützliches Werkzeug zum Abrufen von Datenattributen

2
lychi

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;

}
0
Jmorel88

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