141 votos

Obtener la lista de datos* los atributos con javascript / jQuery

Dado cualquier elemento HTML con cero o más data-* atributos, ¿cómo se puede recuperar una lista de pares clave-valor para los datos.

E. g. dado esto:

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

Me gustaría ser capaz de recuperar mediante programación esta:

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

Usando jQuery (v1.4.3), el acceso a los bits individuales de datos utilizando $.data() es simple, si las claves son conocidos de antemano, pero no es obvio cómo puede uno hacerlo con diferentes conjuntos de datos.

Estoy buscando un 'simple' jQuery solución, si existe, pero no le importaría que un menor nivel de enfoque de otra manera. Yo tenía un ir tratando de analizar $('#prod').attributes pero mi falta de javascript-fu es dejarme abajo.

actualización

datos personalizados no lo necesito. Sin embargo, incluyendo un plugin de jQuery sólo por una fracción de su funcionalidad parecía una exageración.

Mirando hacia la fuente me ayudó a solucionar mi propio código (y mejorado mi javascript-fu).

Aquí está la solución que se me ocurrió:

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

actualización 2

Como se ha demostrado en las respuesta, la solución es trivial con jQuery (>=1.4.4). $(#prod).data() devuelve los datos requeridos dict. Muchas gracias por toda la ayuda.

93voto

Yi Jiang Puntos 28098

En realidad, si usted está trabajando con jQuery, de la versión 1.4.3 1.4.4 (debido al error como se ha mencionado en los comentarios de abajo), data-* atributos son soportados a través de .data():

Como de jQuery 1.4.3 HTML 5 data- los atributos serán automáticamente se paró en jQuery a los datos del objeto.

Tenga en cuenta que las cadenas se mantienen intactos mientras JavaScript valores se convierten a su valor asociado (este incluye booleanos, números, objetos, matrices, y null). La data- los atributos son tirados en la primera el tiempo de los datos de la propiedad se accede y son, entonces, ya no se tiene acceso o mutado (todos los valores de datos que se almacenan internamente en jQuery).

La jQuery.fn.data función devolverá todos los data- de atributo dentro de un objeto como pares clave-valor con la tecla de estado de la parte del nombre del atributo, después data- y el valor sido el valor de ese atributo después de haber sido convertidos siguiendo las reglas establecidas.

También he creado una simple demo si que no te convence: http://jsfiddle.net/yijiang/WVfSg/

77voto

gilly3 Puntos 33285

Un JavaScript puro solución debe ofrecer, como la solución no es difícil:

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

Esto le da una matriz de objetos de atributo, el cual tiene name y value propiedades:

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

Edit: Para dar un paso más, usted puede conseguir un diccionario por la iteración de los atributos y rellenar un objeto de datos:

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

Entonces, usted puede acceder al valor de, por ejemplo, data-my-value="2" como data.myValue;

jsfiddle.net/3KFYf

Estoy un poco tarde para el juego con esta respuesta. Una casi idéntica pregunta sólo se ha cerrado como duplicados antes de que yo pudiera conseguir mi respuesta. Pensé que no me acaba de perder mi respuesta. :-)

20voto

Felix Kling Puntos 247451

Echa un vistazo aquí:

Si el navegador también soporta HTML5 JavaScript API, usted debería ser capaz de obtener los datos con:

var attributes = element.dataset

o

var cat = element.dataset.cat

Oh, pero yo también he leído:

Lamentablemente, el nuevo conjunto de datos de la propiedad aún no ha sido implementado en cualquier navegador, así que mientras tanto es mejor usar getAttribute y setAttribute como se demostró anteriormente.

Es a partir de Mayo de 2010.


Si utiliza jQuery de todos modos, es posible que desee echar un vistazo a los datos personalizados plugin. No tengo ninguna experiencia con ella, aunque.

2voto

lychi Puntos 156

Usted debe obtener los datos a través de los atributos del conjunto de datos

var data = element.dataset;

conjunto de datos es muy útil herramienta para obtener datos de atributo

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by: