為什么 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 片段。

在不同的瀏覽器上可能會有所不同。