запретить jQuery создавать дубликаты клонов с помощью .clone ()

Question

Итак, у меня есть элемент с несколькими дочерними элементами, и когда я пытаюсь использовать jQuery.clone () для родителя, он клонирует родителя (со всеми его потомками), а затем клонирует малышей еще раз. Чтобы уточнить на примере:

Javascript:

$(parent).clone(false).appendTo(container);

Оригинальный HTML

<parent>
    <element1>
    <element2>
</parent>

<container></container>

Модифицированный HTML:

<parent>
    <element1>
    <element2>
</parent>

<container>
    <parent>
        <element1>
        <element1>
    </parent>
    <element1>
    <element2>
</container>

Теперь мне нужен способ запретить функции клонировать элементы без использования идентификаторов или классов, поскольку я не могу предсказать содержимое родительского элемента.

РЕДАКТИРОВАТЬ: Fiddle !

Спасибо,

Luna

Answer 1

Если вы вызываете клон изнутри .each(), он будет проходить через каждый селектор (в вашем случае вы предоставляете класс как родителю, так и его потомку) и дублировать / добавлять каждый найденный элемент. Проще говоря:

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
</div>
<div class="container"></div>

$('.parent, .child').each(function(i,e){
  $(this).clone().appendTo('.container');
});

Будет:

1. Найдите .parent (который по иерархии) также найдет оба .child ren, продублирует их и добавит.
2. Найдет каждого ребенка, а также добавит его (оставив вам впечатление, что клон дважды дублируется).

Вместо этого, в зависимости от вашей установки, просто клонируйте родителя, внесите изменения и добавьте , что result.

Если вы хотите просто клонировать потомка .parent, попробуйте использовать другой селектор (возможно, .parent > .child, чтобы показать прямые дочерние отношения). например $('.parent > .child').clone();

(я опубликовал это в качестве ответа, так как чувствовал, что комментарий не подходит для всех, кто может найти этот вопрос в качестве ресурса)