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，并将代码中的 3 行替换为 (Fiddle)：

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

但是，我想了解 div 和 wrap 方法发生了什么。为什么ul 在第一个示例中消失了？

Answer 1

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

此结构的副本将环绕匹配元素集中的每个元素。此方法返回原始元素集以进行链接。

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

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