为什么 jQuery 没有将此 html 字符串转换为 jQuery 对象？

Question

我有一个模板字符串，我需要将其转换为 jQuery 对象，以便我可以解析它并填写数据。

$(function(){

var template = '<h3>Details</h3>' +
    '<ul>' + 
    '<li>Submitted: <span class="submittedTime"></span></li>' + 
    '<li>Submitted by: <span class="submitter"></span></li>' + 
    '<li>Contact Information' +
        '<ul>' +
        '<li>Name: <span class="contactName"></span></li>' +
        '<li>Name: <span class="contactEmail"></span></li>' +
        '</ul>' +
    '</li>';


var t = $(template);

});

当我尝试对它们执行 jQuery 操作（例如.find() ）时，它失败了。

你对我做错了什么有什么想法吗？

Answer 1

我认为它实际上是，根据Quinten 的评论。 尝试针对带有<div class="test">元素的 HTML 文档运行此脚本：

$(function () {

    var template =
        "<h3>Details</h3>" +
        "<ul>" +
        "<li>Submitted: <span class='submittedTime'></span></li>" +
        "<li>Submitted by: <span class='submitter'></span></li>" +
        "<li>Contact Information" +
        "<ul>" +
        "<li>Name: <span class='contactName'></span></li>" +
        "<li>Name: <span class='contactEmail'></span></li>" +
        "</ul>" +
        "</li>" +
        "</ul>";


    var t = $(template);
    //console.log(t);
    $(t).appendTo(".test");
});

有关演示，请参阅http://jsfiddle.net/5svLfq4r/ 。

Answer 2

您需要将代码片段包装在 div 元素中并关闭外部ul标签。 如果您运行下面的代码段，jQuery 将正确输出 HTML。 我已将您的模板转换为多行语句，以便于阅读

 a = $(function() { var template = ` <div> <h3>Details</h3> <ul> <li>Submitted: <span class="submittedTime"></span></li> <li>Submitted by: <span class="submitter"></span></li> <li> Contact Information <ul> <li>Name: <span class="contactName"></span></li> <li>Name: <span class="contactEmail"></span></li> </ul> </li> </ul> </div>`; var t = $(template); document.write(t.html()) }); a()

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Answer 3

基于文档：

为确保跨平台兼容性，代码段必须格式正确。 可以包含其他元素的标签应该与结束标签配对：

所以你可能需要关闭那个<ul> 。

还，

如果 HTML 比没有属性的单个标签更复杂，[..] 元素的实际创建由浏览器的 .innerHTML 机制处理。 大多数情况下，jQuery 会创建一个新元素并将该元素的 innerHTML 属性设置为传入的 HTML 片段。

在不同的浏览器上可能会有所不同。