在將div作爲字符串附加時在div上設置jQuery數據

我正在創建一個生成大量divs的jQuery插件。最初我使用append函數創建了所有元素，如下所示。在將div作爲字符串附加時在div上設置jQuery數據

var myObject= $('<div></div>').addClass('myobjectname'); 
parentObject.append(myObject);

我有很多像這樣同時，各創建的元素都與他們使用myObject.data('mykey',ajavascriptobject); 但後來，當我開始閱讀更多關於jQuery的優化相關的不同data，我理解，同樣的append DOM操作函數在性能方面非常昂貴。

現在，我試圖創建整個div結構作爲字符串，然後將其作爲一個整體附加到父DOM對象，這應該是非常提高性能。

var i=0; 
var myBigString = []; 
myBigString[i++] = "<div class=\"myobjectname\">"; 
myBigString[i++] = "my content"; 
myBigString[i++] = "</div>"; 
parentObject.append(myBigString.join(''));

我現在用的是data()功能來存儲每個對象以後訪問它（當點擊/鼠標懸停等）的詳細信息。但現在，因爲我創造了整個div結構的字符串，

我怎樣才能在data到如果我創建爲一個字符串的元素相關聯，後來追加到DOM？

來源

2013-02-07 BlackCursor

你不喜歡這樣：

<div data-datum-name="your data string"></div>

對於對象：

<div data-datum-name=' + JSON.stringify(yourObject) + '></div>

JSFiddle example。

來源

2013-02-07 19:38:02

>非常感謝！所以我能夠在元素上調用'data'函數時檢索對象嗎？另外，爲了確認，我的對象有子對象。這是否會在這種情況下工作？最後，由於我將會付出相當大的努力來修改我的代碼，你認爲這會真的提高性能嗎？ – BlackCursor

是的，要獲取所有數據：'$（'selector'）。data（）'。它應該更快 - 每個DOM修改都需要重新計算文檔的重新流動，這可能是一個瓶頸：http://stackoverflow.com/a/9467577/187954您可能也只是'myBigString.push（anotherString）'而不是你的'i'變量。 –

在將div作爲字符串附加時在div上設置jQuery數據

回答

相關問題