如何创建一个准备好追加的空的非null jQuery对象？

Question

我想在循环中将一些html附加到一个空的非null 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

这里你的问题是没有"null"jQuery对象无法追加到"空"那些可以.你已经确定了几种创建空方法的方法,虽然可能有更多方法,但无关紧要 - 无论你如何开始,你想要做的事情根本不会达到预期的效果.因为......

... append()修改DOM,而不是jQuery对象.而一个空的jQuery对象没有DOM!Tomalak有正确的想法,虽然你可能没有理解它.

我将对你可能已经知道的jQuery做三个观察,但这对于理解这个答案的其余部分很有用,因此可能有益于未来的读者:

1. jQuery对象基本上是一组 DOM元素.
2. 一些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是一个空集,所以没有要附加的元素,并且......没有任何反应.步骤#1工作得很好 - 但是通过创建一个没有任何DOM元素的集合,当你尝试使用现有的方法来修改DOM时,你已经将自己设置为失败!参考观察#2 ...要修改集合,您需要调用实际操作集合的方法.

好的,我们假设我们使用set修改方法add():

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

现在我们很好,对吗？每次遍历循环都将创建一个新的jQuery对象,该对象由前一个集合+一个新创建的元素组成.好...

......这只会导致步骤#4做一些奇怪的事情.看,这html()是我在Observation#3中提到的那些方法之一 - 它只在集合中的第一个元素上运行.因此,"<sometag><sometag><sometag>..."您只需获得第一次通过循环("<sometag>")时创建的元素的HTML表示,而不是序列().除非......你甚至会得到那个,因为html()创建元素的表示孩子 -还等什么你真的要结束了是""...

这只是一个很大的失望:你开始使用集合(步骤#1),然后尝试操作DOM(步骤#3),并尝试从一个 DOM元素(没有'存在)(并且如果有,则不会有任何数据)(步骤#4).

你最终提出的解决方案并不可怕 - 你基本上选择在开始时添加一个根元素,并完全在这个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 2

文档碎片非常适合这种情况; 创建一个准备好追加的空对象.:)

$(document.createDocumentFragment())

Answer 3

我找不到其他方法，所以我从<tr>. 删除<tr>同时保留内容无法正常工作，这就是我发布问题的原因。因此，我通过选择所有<sometag>'s which were inside the <tr>并丢弃 $new 来创建一个新的 jQuery 选择。

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

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

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