javascript - 为什么 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

您需要将代码片段包装在 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>