具有不完整 DOM 元素的 jQuery

Question

我的问题与 jQuery 和 DOM 元素有关。我需要一个如下所示的模板：

var threadreply = " <li class='replyItem'>"
                + "     <div class='clearfix'>"
                + "         ${tittle}"
                + "     </div>"
                + " </li>"
                ;
$.template( "threadreply", threadreply );

如您所见，这是一个列表元素。我的问题是当我用 $.tmpl 解析它时，它会检索没有

的有效 DOM 元素。

标签。

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();

有什么方法可以在不重新格式化的情况下检索元素？

我知道我可以使用带有有效 ul 标签并在每个 jQuery 模板循环内的模板来完成此操作，但我不使用 JSON，我无法将数据结构转换为 JSON。

完整的示例如下：

var threadreply = " <li class='replyItem'>"
                + "     <div class='clearfix'>"
                + "         ${tittle}"
                + "     </div>"
                + " </li>"
                ;
$.template( "threadreply", threadreply );

var liElement = "";
for( var i = 0; i < 150; i ++ ){
    liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();
}
$(liElement).appendTo("#ULElement");

编辑

我找到了此线程的解决方法： JQuery 对象到字符串这包括在获取对象的 .html() 之前将 $.tmpl 返回的每个 DOM 元素包装在 div 中：

liElement = liElement + $('<div>').append( $.tmpl("threadreply", {"tittle": "hello"} )).html();

300处理所有元素大约需要 290 毫秒。在循环内使用 appendTo() 时，需要超过 800 毫秒。

Answer 1

您不会获得“li”元素，因为当您获得

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"} ).html();

“li”元素时，您会获得“li”元素的包含 html（或innerhtml）。

html:

<ul id="titleList">
</ul>

js:

$.tmpl("threadreply", {"tittle": "hello"}).appendTo('#titleList');

Answer 2

您只需要字符串而不是真正的 DOM 元素。只需使用：

liElement = liElement + $.tmpl("threadreply", {"tittle": "hello"});

在循环之外，需要将刚刚生成的HTML包装到一个新元素中，然后替换之前的li：

$('<li />').html(liElement).replaceAll('li#existingLiID');