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

Estoy intentando construir DOM con jQuery y llenarlo 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. ¿Proporciona jQuery algún método para esto? La razón por la que quiero hacerlo es porque solo se muestra inicialmente parte de los datos; Otros datos pueden ser necesarios más tarde, dependiendo de las acciones del usuario.

Intenté usar attr() , pero almacena una cadena “[object Object]” en lugar de un objeto real:

 var 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 forma de hacerlo sería “omitir” jQuery ( div[0].foo = {bar: 'foobar'}; ), aunque esto parece ser una “solución sucia”, si jQuery ya soporta la conexión de objetos.

¿Algunas ideas? ¡Gracias por adelantado!

Puedes usar .data() para ese propósito, así:

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

Puedes ver tu código de ejemplo trabajando aquí simplemente cambiando .attr() por .data() :

 var 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"​​​​​​​​​​​​​​

Le sugiero que utilice el método de datos del objeto jQuery. De esta manera puede adjuntar datos personalizados (JSON) al elemento DOM respectivo. Aquí está el código de muestra:

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

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

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