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 had the right idea，虽然你可能没有理解它。

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

jQuery对象基本上是DOM元素的 set 。
有些jQuery方法在集合上运行，有些在节点集合中运行。
某些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 ...要修改集合，您需要在集合上调用实际操作的方法。

好的，我们假设我们使用设置修改方法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()也可以工作，因为它只会转储根元素的内容。

但是为了完整，我将给你一个最终的例子，它适用于 set ，从一个空的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

您的对象$new是一个空选择器，因此append没有要追加的设置。

添加DOM节点需要

add，然后附加到这些DOM节点。不要以为你可以避免以.add开头。

Answer 4

我测试了上面的解决方案，但它对我不起作用，它始终保持为空的jQuery对象......

如果有人感兴趣，这是我的解决方案：

var jQueryElements = [],
    $new;

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

$new = $(jQueryElements);

Answer 5

我找不到另一种方式所以我开始使用<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

Answer 6

如果您不想以丑陋的标签结尾：

if(!$new){
$new.append("</sometag>");
} else {
var $new = $("</sometag>");

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

6 个答案: