jquery, adjuntar objetos (en lugar de atributo de cadena) a un elemento

Question

Estoy tratando de compilar DOM con jQuery y completarlo con datos que se reciben con AJAX (tipo de datos = json). También me gustaría almacenar estos datos como un objeto, adjunto a un elemento DOM específico. ¿JQuery proporciona algún método para esto? La razón por la que quiero hacerlo es porque solo se muestra inicialmente una parte de los datos; otros datos pueden ser necesarios más tarde, dependiendo de las acciones del usuario.

He intentado utilizar attr(), pero almacena una cadena "[object Object]" en lugar de un objeto real:

var div = $('<div/>'); 
div.attr('foo', {bar: 'foobar'}); 
alert(div.attr('foo')); // gives "[object Object]" 
alert(typeof div.attr('foo')); // gives "string" 
alert(div.attr('foo').bar); // gives "undefined" 

Otra manera de hacer esto sería por "pasar" jQuery (div[0].foo = {bar: 'foobar'};), aunque esto parece ser una "solución sucia", si jQuery ya es compatible con adjuntar objetos.

¿Alguna idea? ¡Gracias por adelantado!

Answer 1

Puede utilizar .data() para tal fin, como esto:

div.data('foo', { bar: 'foobar' }); //sets it 
var obj = div.data('foo'); //gets it 

You can see your example code working here just by changing .attr() to .data():

var div = $('<div/>'); 
div.data('foo', {bar: 'foobar'}); 
alert(div.data('foo')); // gives "[object Object]" 
alert(typeof div.data('foo')); // gives "object" 
alert(div.data('foo').bar); // gives "foobar"​​​​​​​​​​​​​​ 

Answer 2

sugiero que utilice los datos método del objeto jQuery. De esta forma puede adjuntar datos personalizados (JSON) al elemento DOM respectivo. Aquí es código de ejemplo:

jQuery("div").data("key", /* JSON object */); 

Más tarde se puede obtener los datos asociados de la siguiente manera:

var data = jQuery("div").data("key");