JQuery присоединяется к нескольким элементам

Я пытаюсь использовать метод jQuery append() для добавления общего содержимого к набору div следующим образом:

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

Я нахожу, что содержимое (в данном случае меню) добавляется к vertical_menu, но не horizontal_menu. Добавляет ли к одному <div> исключить возможность добавления этого содержимого в другой <div> ?

Ответ 1

Вы можете перевернуть его, используя .appendTo() следующим образом:

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

Если menu не является объектом jQuery, просто оберните его:

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

В настоящее время то, что происходит, добавляется или более точно перемещается в #horizontal_menu, а затем сразу же перемещается. Передача селектора или нескольких элементов в .appendTo() заставляет его клонировать и присоединяться к каждому из них.

Ответ 2

Связано ли с добавлением одно из них, чтобы добавить этот контент другому?

Что касается элементов DOM, связанных с [jQuery wrapped], да. Под капотом jQuery вызывает appendChild, который при вызове несколько раз с тем же элементом просто перемещает его из текущей позиции в новую позицию.

Вы можете попробовать cloning сделать копию:

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

Вы можете передать true в clone(), если вы хотите, чтобы обработчики событий также были скопированы.

Ответ 3

Еще cloning twist:

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