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