Obtenir la liste des attributs data- * en utilisant javascript / jQuery

Étant donné un élément HTML arbitraire avec zéro ou plusieurs data-*attributs, comment récupérer une liste de paires clé-valeur pour les données.

Par exemple, étant donné ceci:

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

J'aimerais pouvoir récupérer par programme ceci:

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

En utilisant jQuery (v1.4.3), accéder aux bits de données individuels en utilisant $.data()est simple si les clés sont connues à l'avance, mais il n'est pas évident de savoir comment le faire avec des ensembles de données arbitraires.

Je recherche une solution jQuery «simple» s'il en existe une, mais cela ne me dérangerait pas une approche de niveau inférieur autrement. J'ai essayé d'analyser $('#prod').attributesmais mon manque de javascript-fu me laisse tomber.

mettre à jour

customdata fait ce dont j'ai besoin. Cependant, inclure un plugin jQuery juste pour une fraction de ses fonctionnalités semblait être une exagération.

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

Voici la solution que j'ai trouvée:

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 démontré dans la réponse acceptée, la solution est triviale avec jQuery (> = 1.4.4). $('#prod').data()renverrait les données requises dict.

En fait, si vous travaillez avec jQuery, à partir de la version 1.4.31.4.4 (en raison du bogue mentionné dans les commentaires ci-dessous), les data-*attributs sont pris en charge via .data():

À partir de jQuery 1.4.3, les data- attributs HTML 5 seront automatiquement intégrés à l'objet de données de jQuery.

Notez que les chaînes sont laissées intactes tandis que les valeurs JavaScript sont converties à leur valeur associée (cela inclut les booléens, les nombres, les objets, les tableaux et null). Les data- attributs sont extraits lors du premier accès à la propriété data, puis ne sont plus accédés ou mutés (toutes les valeurs de données sont ensuite stockées en interne dans jQuery).

La jQuery.fn.datafonction retournera tous les data-attributs à l'intérieur d'un objet sous forme de paires clé-valeur, la clé étant la partie du nom d'attribut après data-et la valeur étant la valeur de cet attribut après avoir été convertie en suivant les règles énoncées ci-dessus.

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

Une solution JavaScript pure devrait également être proposée, car 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 attribut, qui ont nameet valuepropriétés:

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

Modifier: pour aller plus loin, vous pouvez obtenir un dictionnaire en itérant les attributs et en remplissant 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 alors accéder à la valeur de, par exemple, data-my-value="2"comme data.myValue;

jsfiddle.net/3KFYf/33

Modifier: si vous souhaitez définir des attributs de données sur votre élément par programmation à partir d'un objet, vous pouvez:

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: Si vous utilisez babel ou TypeScript, ou codez uniquement pour les navigateurs es6, c'est un bon endroit pour utiliser les fonctions fléchées es6 et raccourcir un peu le code:

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

Regardez ici :

Si le navigateur prend également en charge l'API JavaScript HTML5, vous devriez pouvoir obtenir les données avec:

var attributes = element.dataset

ou

var cat = element.dataset.cat

Oh, mais j'ai aussi lu:

Malheureusement, la nouvelle propriété de l'ensemble de données n'a encore été implémentée dans aucun navigateur, il est donc préférable de l'utiliser en attendant getAttributeet setAttributecomme démontré précédemment.

C'est à partir de mai 2010.

Si vous utilisez quand même jQuery, vous voudrez peut-être jeter un coup d'œil au plugin customdata . Je n'ai cependant aucune expérience avec cela.

Comme mentionné ci-dessus, les navigateurs modernes ont l' API The HTMLElement.dataset .
Cette API vous donne un DOMStringMap , et vous pouvez récupérer la liste des data-*attributs en faisant simplement:

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

vous pouvez également récupérer un tableau avec les data-noms de clé de la propriété comme

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

ou mappez ses valeurs par

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

et comme ça, vous pouvez les itérer et les utiliser sans avoir besoin de filtrer entre tous les attributs de l'élément comme nous devions le faire auparavant .

ou convertissez gilly3l'excellente réponse en une méthode 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;
}

En utilisant $('.foo').info():;

Vous devriez obtenir les données via les attributs de l'ensemble de données

var data = element.dataset;

dataset est un outil utile pour obtenir l'attribut de données

Vous pouvez simplement parcourir les attributs de données comme n'importe quel autre objet pour obtenir des clés et des valeurs, voici comment le faire avec $.each:

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

J'utilise chacun imbriqué - pour moi, c'est la solution la plus simple (Facile à contrôler / modifier "ce que vous faites avec les valeurs - dans mon exemple, les attributs de données de sortie comme ul-list) (Code Jquery)

var model = $(".model");

var ul = $("<ul>").appendTo("body");

$(model).each(function(index, item) {
  ul.append($(document.createElement("li")).text($(this).text()));
  $.each($(this).data(), function(key, value) {
    ul.append($(document.createElement("strong")).text(key + ": " + value));
    ul.append($(document.createElement("br")));
  }); //inner each
  ul.append($(document.createElement("hr")));
}); // outer each

/*print html*/
var htmlString = $("ul").html();
$("code").text(htmlString);

<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/prism.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism-okaidia.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1 id="demo"></h1>

<ul>
  <li class="model" data-price="45$" data-location="Italy" data-id="1234">Model 1</li>
  <li class="model" data-price="75$" data-location="Israel" data-id="4321">Model 2</li> 
  <li class="model" data-price="99$" data-location="France" data-id="1212">Model 3</li> 
</ul>

<pre>
<code class="language-html">
  
</code>
</pre>

<h2>Generate list by code</h2>
<br>

Codepen: https://codepen.io/ezra_siton/pen/GRgRwNw?editors=1111

Une façon de trouver tous les attributs de données consiste à utiliser element.attributes. En utilisant .attributes, vous pouvez parcourir tous les attributs d'élément, en filtrant les éléments qui incluent la chaîne "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;

}