Obtenir la liste des données-* attributs à l’aide de javascript / jQuery

Question

Compte tenu de l'arbitraire d'un élément HTML avec zéro ou plus data-* attributs, comment peut-on récupérer une liste de paires clé-valeur pour les données.

E. g. compte tenu de ceci:

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

Je voudrais être en mesure de récupérer par programme ce:

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

À l'aide de jQuery (v1.4.3), l'accès à la personne de bits de données à l'aide d' $.data() est simple, si les touches sont connus à l'avance, mais il n'est pas évident de savoir comment on peut le faire avec de l'arbitraire des ensembles de données.

Je suis à la recherche d'une 'simple' jQuery solution s'il en existe, mais ne serait pas l'esprit d'un niveau inférieur à aborder autrement. J'ai eu un aller à essayer d'analyser $('#prod').attributes mais mon manque de javascript-fu est de me laisser descendre.

mise à jour

customdata fait ce dont j'ai besoin. Cependant, y compris un plugin jQuery juste pour une fraction de sa fonctionnalité semblait exagéré.

Eyeballing la source m'a aidé à résoudre mon propre code (et amélioré mon javascript-fu).

Voici la solution que j'ai trouvé:

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

mise à jour 2

Comme l'a démontré accepté de répondre, la solution est triviale avec jQuery (>=1.4.4). $(#prod).data() serait de retour les données requises, dict. Merci beaucoup pour toute l'aide que.

Answer 1

En fait, si vous travaillez avec jQuery, à partir de la version 1.4.3 1.4.4 (à cause du bug comme mentionné dans les commentaires ci-dessous), data-* attributs sont pris en charge par .data():

Comme de jQuery 1.4.3 HTML 5 data- les attributs seront automatiquement tiré à jQuery de l'objet de données.

Notez que les chaînes sont laissés intacts alors que les valeurs sont converties en JavaScript à leur valeur associée (cet comprend les booléens, les nombres, les objets,les les tableaux, et la valeur null). L' data- les attributs sont tirés dans la première les données de la propriété est accessible et alors ne sont plus accessibles ou muté (toutes les valeurs de données sont ensuite stockées l'interne en jQuery).

L' jQuery.fn.data fonction sera de retour tous les de la data- d'attribut à l'intérieur d'un objet sous forme de paires clé-valeur, avec la clé d'été de la partie du nom de l'attribut après data- et la valeur de la valeur de l'attribut après avoir été convertis en suivant les règles indiquées ci-dessus.

J'ai également créé une simple démo si cela ne suffit pas à vous convaincre: http://jsfiddle.net/yijiang/WVfSg/

Answer 2

Un pur JavaScript solution devrait être offert en tant que bien que la solution n'est pas difficile:

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

Cela donne un tableau d'objets d'attribut, qui ont name et value propriétés:

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

Edit: Pour aller un peu plus loin, vous pouvez obtenir un dictionnaire par itération les attributs et le remplissage d'un objet de données:

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

Vous pouvez ensuite accéder à la valeur de, par exemple, data-my-value="2" comme data.myValue;

jsfiddle.net/3KFYf

Je suis un peu en retard pour le jeu avec cette réponse. Un presque identique question était à peine fermée que les doublons avant que je puisse obtenir ma réponse. J'ai pensé que je ne devrais pas simplement perdre ma réponse. :-)

Answer 3

Jetez un oeil ici:

Si le navigateur prend également en charge le HTML5 JavaScript de l'API, vous devriez être en mesure d'obtenir les données avec:

var attributes = element.dataset

ou

var cat = element.dataset.cat

Oh, mais j'ai aussi lu:

Malheureusement, le nouveau jeu de données de la propriété n'a pas encore été mis en œuvre dans n'importe quel navigateur, de sorte que, dans l'intervalle, il est préférable d'utiliser getAttribute et setAttribute comme l'a démontré plus tôt.

C'est à partir de Mai 2010.

---

Si vous utilisez jQuery, de toute façon, vous pouvez avoir un coup d'oeil à la customdata plugin. Je n'ai aucune expérience avec elle.

Answer 4

Vous devriez obtenir les données via les attributs de groupe de données

ensemble de données est un outil utile pour l’attribut data-get