jquery，将对象（而不是字符串属性）附加到元素

Question

我试图用jQuery构建DOM，并用AJAX（数据类型= json）接收的数据填充它。我还想将这些数据作为一个对象存储，并附加到特定的DOM元素。 jQuery是否为此提供了任何方法？我想这样做的原因是因为只有部分数据是最初显示的;其他数据可能稍后需要，具体取决于用户的操作。

我尝试使用attr()，但它存储字符串“[对象的对象]”，而不是一个实际的对象：通过“绕过”的jQuery（div[0].foo = {bar: 'foobar'};）

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" 

另一种方式来做到这一点是，虽然这似乎是一个“肮脏的解决方法”，如果jQuery碰巧已经支持附加对象。

任何想法？提前致谢！

Answer 1

您可以使用.data()用于这一目的，像这样：

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

我建议你使用数据jQuery对象的方法。这样您可以将自定义数据（JSON）附加到相应的DOM元素。下面是示例代码：

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

以后就可以得到相关数据的方式如下：

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