如何创建一个空的、非空的 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

您的问题是没有不能附加的“空”jQuery 对象和可以附加的“空”对象。您已经确定了几种创建空的方法，虽然可能有更多方法，但没关系 - 无论如何，您尝试做的事情都不会按照您的预期做 你开始了，因为...

...append() 修改 DOM，而不是 jQuery 对象。而一个空的 jQuery 对象没有 DOM！ Tomalak had the right idea，虽然你可能不明白。

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

1. jQuery 对象本质上是一个 set DOM 元素。
2. 一些 jQuery 方法对集合进行操作，一些对集合in 的节点进行操作。
3. 某些 jQuery 方法仅对添加到集合的 first 节点进行操作（或仅从中检索信息）。

考虑到这三个观察结果，让我们考虑您的示例：

// 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 是一个 empty 集合，因此没有要附加的元素，并且...什么也没有发生。步骤 #1 工作得很好 - 但是通过创建一个没有任何 DOM 元素的集合，当您尝试使用现有的方法来修改 DOM 时，您已经将自己设置为失败！参考观察#2...要修改集合，您需要调用一个实际操作集合的方法。

好的，假设我们使用 set modify 方法 add() 代替：

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

现在我们很好，对吧？每次循环都会创建一个新的 jQuery 对象，该对象由前一个集合 + 一个新创建的元素组成。嗯……

...这只会导致步骤#4 做一些奇怪的事情。看，html() 是我在观察 #3 中提到的方法之一 - 它仅对集合中的第一个元素进行操作。因此，不是序列 ("<sometag><sometag><sometag>...")，您只会获得在第一次通过循环 ("<sometag>") 时创建的元素的 HTML 表示。除了...你甚至不会得到那个，因为html() 创建了元素的子元素的表示 - 所以你是什么真的 最后是""...

这只是一个很大的失望：你开始使用集合（步骤#1），然后尝试在 DOM 上操作（步骤#3），最后尝试从 one 中提取数据 DOM 元素（不存在）（如果存在则不会有任何数据）（第 4 步）。

The solution you finally came up with 并不可怕——你实际上是选择将 one 根元素添加到集合中，并完全在这个 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 没有要附加到的集合。

add 是添加 DOM 节点所必需的，然后您附加到这些 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> 创建了一个新的 jQuery 选择并丢弃了 $new。

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>");