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>

但它似乎与那里的“包裹”无关。我没有得到任何错误，它只是不用divB包装divA，只是自己插入divA。

我误解了吗？

更新：

一个不起作用的简单示例：

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

这将在myBox之后添加DIV。

似乎jQuery不喜欢将wrap添加到之后。

Answer 1

你试过吗

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

仅用于测试目的？

据我了解，您不应将jQuery对象传递给wrap-function：

  

.wrap（）函数可以带任何   可以传递的字符串或对象   到$（）工厂函数到指定   DOM结构。这种结构可能是   嵌套了几层深，但应该   只包含一个inmost元素。该   结构将缠绕在每个   匹配集合中的元素   元件。

如果上面的例子有效，那么这就是原因; - ）

Answer 2

偶然发现了遇到同样问题的线程：jQuery .wrap() isn't working

我认为如果您从

更改代码

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

你会得到你的包装。

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/

Answer 4

我让这个工作：

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

用你的html来解决你的初始问题。 Here是jQuery结束函数的源代码。这段代码将使链上升一级（到myDiv级别），然后根据该级别的find（'。classA'）进行换行。这将找到你的div添加后，并用divB包装在div中。

编辑： 好的，我认为这将按照你想要的方式为你服务：

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

我认为问题是当调用div上的wrap时，它需要是一个jQuery对象才能正常工作。所以你真正想到的就是在（）中包装divA。

Answer 5

你不是在寻找包装。你想要：

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

Answer 6

我可能读错了，但是如果你使用jQuery，那不是$ a reserved字符吗？您是否尝试过设置变量名称以便它们不使用它？

如果是这样的话：

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

或

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

Here's the jQuery docs就此事。