jquery obtener atributos

Question

Estoy buscando una manera de agarrar los atributos personalizados de un elemento con jquery.

<span id='element' data-type='foo' data-sort='bar'></span> 

estoy mirando para conseguir: ["data-type", "data-sort"] como una matriz.

¿Alguien sabe cómo hacer esto?

Gracias.

Answer 1

se puede utilizar el bucle .attributes DOM property ya través de, por ejemplo:

var arr = document.getElementById('element').attributes, attributes = []; 
//or if you're inside a jQuery loop, just use this.attributes 
//e.g.: var arr = $("span").get(0).attributes, attributes = []; 
for(var i = 0; i < arr.length; i++) { 
    if(arr[i].name.indexOf("data-") == 0) //only ones starting with data- 
    attributes.push(arr[i].name); 
} 
alert(attributes); ​//use it for something, result is ["data-type", "data-sort"] 

You can see a working demo here, aparte de agarrar el elemento, esto no es jQuery específica en absoluto, por lo que fácilmente se podría eliminar por completo si es necesario.

Answer 2

simplemente $('#element').attr('data-type'); y $('#element').attr('data-sort');

lo siento, respuesta antes de leer toda la cuestión: -/no creo que haya un sistema incorporado en la funcionalidad para obtenerlos como una matriz, consiguen a la primera, se produce la segunda y luego construir la matriz de forma manual.

Answer 3

Sólo como referencia para aquellos que utilizan jQuery, los atributos que empiezan con 'Data-' se puede acceder por la función data():

<span id='element' data-type='foo' data-sort='bar'></span> 

var el = $('#element'); 
return [el.data('type'), el.data('sort')]; 

Algunos navegadores están empezando a almacenar estos en formas más avanzadas (almacenamiento de datos local?) y otros no, pero parece funcionar bastante bien. Tenga en cuenta que a los validadores de W3C no les gustan los atributos de expando como este, pero creo que hay algunas propuestas para estandarizar esto, así que validan. La última vez que investigué sobre la mejor manera de almacenar datos con un elemento, usando data-key, este fue uno de los ganadores entre los profesionales.

Otra forma me encontré con atar los datos a un elemento es insertar una etiqueta de script inmediatamente antes o después del elemento, lo que le da un tipo distinto a text/javascript tales como:

<script id="templatedata" type="text/html"> 
    <span>23</span> 
    <span>Alfred</span> <!-- I'm sure you can get more creative than I'm being here --> 
</script> 

Esto no se mostrará en el navegador, y aún puede obtener el código HTML allí a través del $('#templatedata').html();. Esto aún puede tener problemas, ya que técnicamente no es correcto, pero si la validación HTML de W3C es importante para usted, puede ser una opción viable.

Answer 4

Puede usar este código, es muy fácil de buscar. Solo incluya jquery nada más .. Simple Jquery Filter