JQuery附加到多个元素失败

Question

我正在尝试使用jQuery的append（）方法将公共内容附加到div的集合中，如下所示：

$("#horizontal_menu").append(menu);
$("#vertical_menu").append(menu);

我发现内容（在本例中为菜单）会附加到vertical_menu但不会附加到horizo​​ntal_menu。附加到一个＆lt; div＆gt;阻止您将该内容附加到另一个＆lt; div＆gt;？

Answer 1

您可以使用.appendTo()这样翻转它：

menu.appendTo("#horizontal_menu, #vertical_menu");

如果menu不是jQuery对象，只需将其包装起来：

$(menu).appendTo("#horizontal_menu, #vertical_menu");

目前正在发生的事情是它会被追加，或者更准确地移动到#horizontal_menu，然后立即再次移动。将选择器或多个元素传递给.appendTo()会使其克隆并附加到内部。

Answer 2

  

是否会阻止您将该内容附加到另一个内容？

关于[jQuery wrapped] DOM元素，是的。在引擎盖下，jQuery调用appendChild，当使用相同的元素多次调用moves it from its current position to the new position时。

您可以尝试cloning制作副本：

var $menu = $(menu);
$("#horizontal_menu").append($menu.clone());
$("#vertical_menu").append($menu.clone());

如果您希望复制事件处理程序，也可以将true传递给clone()。

Answer 3

另一个cloning扭曲：

        var menu = $("#menu").contents();
        menu.clone().appendTo("#ulOne");
        menu.clone().appendTo("#ulTwo");