Question

我正在创建一个生成大量divs的jQuery插件。最初我使用append函数创建所有元素，如下所示。

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

我有很多像这样创建的元素，并且每个元素都使用data与它们相关联的myObject.data('mykey',ajavascriptobject);不同但是后来，当我开始阅读有关jQuery优化的更多信息时，我理解像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结构的字符串，

如果我将这些元素创建为字符串并稍后将其附加到DOM，我如何将data与元素相关联？

Answer 1

你这样做：

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

对象：

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

JSFiddle example

将div作为字符串附加在div上时设置jQuery数据

1 个答案: