jQuery wrap 奇怪的行为

Question

我写了一段代码，将两个现有元素包装成一个新元素。我的第一次尝试是这样的：

var $btn = $("button"),
    $ul = $btn.next("ul"),
    $div = $("<div></div>");

$btn.wrap($div);
$div.append($ul);

我惊讶地发现在代码运行之后 ul 从 DOM 中消失了。 Fiddle.

我能够修复它，从 wrap 和 append 之间的 DOM 中选择 div 像这样 (Fiddle):

$div = $btn.parent();

在 Google 中搜索几次后的事件我发现 this and replaced the 3 lines in my code with this (Fiddle):

$btn.wrap($div).after($ul);

但是我想了解 div 和 wrap 方法是怎么回事。为什么 ul 在第一个例子中消失了？

Answer 1

wrap 命令创建给定元素的副本，因此创建的 'div' 与存储在变量中的 'div' 不同。来自文档：

A copy of this structure will be wrapped around each of the elements in the set of matched elements. This method returns the original set of elements for chaining purposes.

更多信息位于：http://api.jquery.com/wrap/

如果您想查看您的 div，请将此代码 $('body').append($div); 放在您的代码之后，您将看到您的 'ul' 并没有消失。您将 'ul' 元素放在 'div' 元素中，但您没有在任何地方使用 'div'。

jQuery wrap 奇怪的行为

jQuery wrap Strange behavior

jquery

dom

dom-manipulation