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's comment。尝试针对带有(+VALUE:{2.1 TO *} +VALUE:{2 TO *})元素的HTML文档运行此脚本：

<div class="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

基于 documentation ：

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

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

此外，

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

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

为什么jQuery没有将这个html字符串变成jQuery对象？

3 个答案: