如何創建一個空的，非空的jQuery對象準備好追加？

Question

我想附加一些HTML到一個空的非空jQuery對象只在循環中，但它不工作，除非我創建一個對象，並在創建過程中添加一個HTML標記。我怎樣才能創建一個空的jQuery對象，並能夠稍後添加html？

//var $new = $().add(""); //can't use this object in the loop 
//var $new = $([]);  //can't use this object in the loop 
//var $new = $();  //can't use this object in the loop 
//var $new = $("#nonexistingelement"); //can't use this object in the loop 
var $new = $().add("<tr>"); //works but I don't want to add any html at this point. 

$.each(.....) 
    { 
    $new.append("<sometag>"); 

}); 

alert($new.html()); //should display some html 

增加： http://jsfiddle.net/vfPNT/

Answer 1

我找不到另一種方式，所以我開始使用<tr>。刪除<tr>，同時保持內容不能正常工作，這就是爲什麼我發佈的問題。所以，相反，我通過選擇所有<sometag>'s which were inside the <tr>創建了一個新的jQuery選擇，並拋棄了$ new。

var $new = $().add("<tr>"); 

$.each(.....) 
    { 
    $new.append("<sometag>"); 

}); 
$new.append("</tr>"); 
$newObject = $('sometagt', $new) 
..... do more work using $newObject 

Answer 2

你的對象$new是一個空的選擇器，所以append沒有套要追加到。

add是需要添加一個DOM節點，然後你追加到這些DOM節點。不要以爲你可以避免從.add開始。

Answer 3

這裏的問題是，沒有「空」的jQuery對象不能被追加到「空」的可以。你已經確定了幾種方法來創建一個空的方法，雖然可能有更多，但沒關係 - 你試圖做的只是不會做你期望的事情，不管你如何你如何你開始，因爲...

... append()修改DOM，而不是jQuery對象。而一個空的jQuery對象沒有DOM！ Tomalak had the right idea，雖然你可能還沒有理解它。

我要做出關於jQuery的三點意見，你很可能已經知道，但在理解這個答案的其餘部分是有用的，因此可能有利於未來的讀者：

1. 一個jQuery對象基本上是DOM元素的集合。
2. 一些jQuery方法對集合進行操作，並且一些jQuery方法在集合上的節點上操作。
3. 某些jQuery方法僅對添加到集合中的節點（或僅從中檢索信息）操作第一個節點。

考慮到這三種意見，讓我們考慮您的示例：

// 1. create an empty set somehow (doesn't matter how) 
var $new = $(); 

// 2. iterate over something 
$.each(..., function(...) 
{ 
    // 3. construct a DOM fragment from HTML, and append it 
    $new.append("<sometag>"); 
}); 

// 4. try to display HTML corresponding to the jQuery object 
alert($new.html()); 

在這個例子中，步驟3將無法做任何有用的，因爲append()的目的是爲了採取任何DOM元素它並將它們作爲子元素附加到集合中的每個DOM元素。由於$new是空的集合，沒有要追加的元素，並且......沒有任何反應。第一步工作正常 - 但通過創建一個沒有任何DOM元素的集合，當您嘗試使用存在的方法來修改DOM時，您已經設置爲失敗！參考觀察＃2 ...修改集合，您需要調用實際上在集合上操作的方法。

好了，讓我們說我們使用了一套修改方法add()代替：

$new = $new.add("<sometag>"); 

現在我們是很好的，對不對？每一次通過循環都會創建一個新的jQuery對象，它由前一集+新創建的元素組成。那麼......

......這隻會導致第4步做些奇怪的事情。請參閱html()是我在觀察＃3中提到的那些方法之一 - 它僅在集合中的第一個元素上運行。因此，而不是一個序列（"<sometag><sometag><sometag>..."），您只會獲得在第一遍循環中創建的元素的HTML表示（"<sometag>"）。除非......你甚至會得到是，因爲html()創建的元素的兒童的表示 - 所以你在做什麼真正要與落得是"" ...

這只是一個很大的失望：你開始使用集合（步驟＃1），然後嘗試操作DOM（步驟＃3），並試圖從一個 DOM元素（即不存在）（如果有的話，不會有任何數據）（步驟＃4）。

The solution you finally came up with並不可怕 - 你基本上選擇加入添加一個根元素的集合開始了，直到你完成添加新元素，並準備對它們進行操作這個DOM片段完全操作。你已經從修改的例子中省略了它，但html()也可以工作，因爲它只是簡單地轉儲根元素的內容。

但僅僅是完整的，我給你在工作的最後一個例子中設置，從一個空jQuery對象：

var $new = $(); 
$.each([1, 2, 3, 4], function(i, v) 
{ 
    $new = $new.add("<div>"); 
}); 

alert($new.length == 4); // true 

// alerts: <div></div><div></div><div></div><div></div> 
alert($("<div>").append($new).html()); 

Answer 4

我testet上述解決方案，但它沒有工作對我來說，它總是停留爲空的jQuery對象...

如果有人有興趣，這裏是我的解決方案：

var jQueryElements = [], 
    $new; 

$.each([1, 2, 3, 4], function(i, v){ 
    jQueryElements = jQueryElements.push($('<div>').get(0)); 
}); 

$new = $(jQueryElements); 

Answer 5

文檔片段是PE爲此，創建一個空的對象準備添加。 :)

$(document.createDocumentFragment())