Копирование значений каждого в идентичную структуру

#javascript #html #jquery

#javascript #HTML #jquery

Вопрос:

У меня есть два вложенных <div> с идентичной структурой. Что-то вроде этого:

 <div class="foo" id="{{ randomNumber1 }}">Hello</div>
<div class="this" id="{{ randomNumber2 }}">
  <div class="that" id="{{ randomNumber3 }}">World</div>
  <div class="bar" id="{{ randomNumber4 }}">
    <div class="fizz" id="{{ randomNumber5 }}">
      <div class="buzz" id="{{ randomNumber6 }}">How was your day?</div>
    </div>
  </div>
  <!-- goes on -->
 

Затем где-то еще у меня такая же структура. Однако идентификаторы divs различны, и у них инициализирован другой javascript. Мне нужно скопировать значение структуры и поместить его во вторую, идентичную структуру.

Я пытался использовать HTML-код jQuery:

 $(mySecondStructure).html($(myFirstStructure).html());
 

Однако это, очевидно, нарушает идентификаторы и, следовательно, javascript. Поэтому единственным решением является только копирование значений каждого и помещение его в эквивалент <div> во второй структуре.

Есть ли способ легко клонировать это? Я знаю, что мог бы выполнить each(); функцию, но, возможно, в нее уже что-то встроено

Комментарии:

1. » Однако это, очевидно, нарушает идентификаторы и, следовательно, javascript » если id отличается, это ничего не должно «ломать». Обратите внимание, что все id в вашем примере являются проблемой, потому что все они одинаковы. Если под ‘breaks the JS’ вы подразумеваете, что обработчики событий потеряны, это потому, что вы создаете новые элементы, а не перемещаете существующие. Чтобы сделать последнее, append() первое ко второму вместо копирования HTML

2. @RoryMcCrossan Я назвал их randomNumbers в качестве заполнителя, поскольку, хотя было бы очевидно, что это означает, что он заполнен случайными числами. Однако я отредактирую его, чтобы сделать более понятным.

Ответ №1:

привязка идентификатора и события должна измениться после клонирования части HTML следующим образом.

 $('yourselector')
.clone(true)
.attr('id', 'new_unique_id')
.off();