如何创建一个空的,非空的jQuery对象准备添加？

我想附加一些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 /

解决方法

你的问题在于，没有“null”jQuery对象，不能被附加到和“空”可以是。你已经确定了几种方法来创建一个空的，虽然可能有更多，没关系 – 你想做什么不会做你所期望的，无论你怎么开始，因为…

… append()修改DOM，而不是jQuery对象。和一个空的jQuery对象没有DOM！ Tomalak had the right idea，虽然你可能不了解它。

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

>一个jQuery对象基本上是一组DOM元素。
>一些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元素拉取数据完成(didn’ t存在)(并且如果它存在，则不具有任何数据)(步骤#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());

如何创建一个空的,非空的jQuery对象准备添加？

解决方法

猜你在找的jQuery相关文章