jQuery包装语法

Question

现在已经到了一天的尽头，我希望我只是逻辑上短暂失误。

我无法让这个工作：

var $divA= $("<div></div>").addClass('classA');

var $divB= $("<div></div>").addClass('classB');

$myDiv.after($divA.wrap($divB));

上面的内容应该把它变成这样：

<div id="myDiv"></div>

转化为：

<div id="myDiv"></div>
<div class="classB">
    <div class="classA"></div>
</div>

但是加上那个'wrap'似乎不起作用。我没有收到任何错误信息，只是divA没有被divB包裹，而是单独插入了divA。

我是否误解了wrap的使用方法？

更新：

一个更简单的示例，但仍然无效：

$myBox.after($("<p></p>").wrap("<div></div>"));

那将在myBox后添加一个DIV。看起来jQuery不喜欢将wrap添加到after中。

- DA.

Answer 1

刚刚偶然发现了这个帖子，遇到了同样的问题：jQuery .wrap() isn't working

我认为如果你将代码从

$myDiv.after($divA.wrap($divB)) 改为 $myDiv.after($divA.wrap($divB).parent())

你就会得到你想要的包裹效果。

- Bijou Trouvaille

Answer 2

你尝试过吗？

$myDiv.after($divA.wrap('<div class="divB"></div>'));

只是为了测试目的吗？

据我所知，您不应该将jQuery对象传递给wrap函数：

.wrap()函数可以接受任何可以传递到$()工厂函数以指定DOM结构的字符串或对象。该结构可以嵌套数层，但应仅包含一个最内层的元素。该结构将被包装在匹配元素集中的每个元素周围。

如果上面的示例有效，则原因如下：

- Leo

---

好知道！不过，即使将它变成字符串，我仍然无法让它工作（请参见我帖子中的新示例）。 - DA.

它确实需要一个jQuery对象，因为$()工厂可以接受它。 以$( $('<div/>') )为例。 - Denes Papp

@DénesPapp，你是对的...它应该接受它，但它没有。也就是说，它会接受它，但不会对其进行任何有用的操作。太愚蠢了，应该更好地记录。 - ekkis

Answer 3

可能让您感到困惑的是，.wrap() 返回的是内部元素，而不是父元素。

因此，您必须使用被包装元素的父对象，如下所示：

var $divA= $("<div/>").addClass('classA'),
    $divB= $("<div/>").addClass('classB');

$myDiv.after($divA.wrap($divB).parent());

$divA.parent()在包装后等于$divB

关键点是$divA.wrap($divB)返回的是$divA，而不是$divB

参考文献如下:

此方法返回用于链接的原始元素集。

http://api.jquery.com/wrap/

- Denes Papp

Answer 4

我已经让它工作了：

$('div#myDiv').after("<div class='classA'></div>").end().find('.classA').wrap("<div class='classB'></div>");

使用你的HTML来解决你最初的问题。这里是jQuery end函数的源代码。这段代码将使链条向上一级（到myDiv级别），然后根据该级别的find('.classA')进行包装。这将找到用after添加的div，并将其用具有classB的div包裹。

编辑： 好的，我认为这对你来说会起作用：

var divA= $("<div></div>").addClass('classA');
$('div#myDiv').after($(divA).wrap('<div class="divB" />'));

我认为问题在于调用divA的wrap方法时，它需要是一个jQuery对象才能正确工作。所以你缺少的只是将divA包装在()中。

- rosscj2533

---

那是我的备选方案，但我正在尝试避免再次遍历这些东西。 - DA.

Answer 5

你不是在寻找wrap。你需要的是：

divB.append(divA).insertAfter('#myDiv');

- nikc.org

---

我会点赞，因为那似乎可以达到同样的效果。太好了！但我仍然很好奇为什么我使用的包装方法只能部分地起作用。它看起来应该做我想要的事情，或者应该完全失败。 - DA.

你因为曾经被踩过，所以我给了你一个赞。我讨厌那些没有反馈就踩人的人。 - ekkis

Answer 6

我可能理解有误，如果你正在使用 jQuery，$ 不是一个保留字符吗？你尝试过将变量名设置为不使用它吗？

如果是这样：

var divA = $("<div></div>").addClass('classA');
divA.wrap("<div class=\"classB\"></div>");
divA.insertAfter($("#myDiv"));

或者

divA.after($("#myDiv"));

关于此事，这里是jQuery文档。

- Tristan Warner-Smith

---

有一些争议，关于是否这样做，但许多人在任何jQuery对象变量之前都加上$。 - DA.

哇，我不知道那个。看起来像是 PHP 或 Perl！ - Jared Updike

你把$divA和$(divA)混淆了，它们不是同一个东西。而且$divA也不同于$，它们就像A和B一样，是两个独立的变量名。 - Denes Papp