如何在 Click 功能上克隆项目？答案

【问题标题】：How to Clone items on Click function?如何在 Click 功能上克隆项目？
【发布时间】：2021-12-01 06:40:12
【问题描述】：

我用本地存储创建了一些元素，它工作正常，但我希望项目也应该克隆到特定的 div 标签。

这是我的 jsFiddle 代码jsFiddle Demo

现在当我尝试将所有元素克隆到 <div class="all-items"></div> 但它不起作用下面是我的代码

 $(function() {
  $('.mix').click(function() {
    $(this).toggleClass('selected')
    window.localStorage.setItem('test' + this.dataset.id, $(this).hasClass('selected'));
  });

  $('.mix').each(function() {
    var id = 'test' + this.dataset.id;
    if (localStorage.getItem(id) && localStorage.getItem(id) == "true") {
      $(this).addClass('selected');
    }
        });
  $(document).ready(function() {
    var e = $('.top-items');
    for (var i = 0; i < 5; i++) {
      e.clone().insertAfter(e);
    }
});

HTML 在这里

<div class="top-items">
<div data-id="1" class="box p001 mix ">Div 1</div>
<div data-id="2" class="box p002 mix">Div 2</div>
<div data-id="3" class="box p002 mix">Div 2</div>
<div data-id="4" class="box p002 mix">Div 2</div>
<div data-id="5" class="box p002 mix">Div 2</div>
</div>

<div class="all-items"></div> //all elements should be clone here on click one by one

为了实现这一点，我尝试了点击功能，但它没有提供完美的解决方案，所以我希望在添加元素时将它们从 <div class="all-items"></div> 克隆标签中删除。

我们非常感谢任何帮助或建议。

【问题讨论】：

您的代码中似乎没有提到$(".all-items")。 “但它没有给出完美的解决方案” - 请包括您的尝试。不清楚 localStorage 是否与克隆问题有关；如果不相关，则无需包含它。
注意：在你的小提琴中，<div class="all items"> 是两个，单独的类。
克隆元素的代码在哪里？我在 Stack Overflow 上没有看到它。请使用Stack Snippet 分享重现问题所需代码的minimal reproducible example。
请重新检查我更新了代码和jsFiddle
我只想克隆所有项目，但使用 onclick 以便当用户单击元素时，它也应该在下面克隆，当用户单击克隆项目时它也会显示被删除

标签： javascript jquery function onclick local-storage

【解决方案1】：

你可以这样做

let topItemsHTML = $(".top-items").html()
$(".top-items").html("");  // clear top-items div

$(".all-items").html(topItemsHTML)  // fill all-items with top-items

【讨论】：

嗨，欢迎来到 SO。无需使用.html() 来移动元素。 OP 正在尝试（或似乎是）使用 .clone() 创建副本，因此“清除顶级项目”不合适。要移动元素，你可以使用$(".top-items>div").appendTo(".all-items")。
请您提供任何 jsFiddle 工作解决方案
@riya875 您还没有指定您认为的“工作解决方案” - 稍作改动，您的代码“工作”，但不清楚它是否“完美工作”，因为没有细节至于它应该做什么：jsfiddle.net/bLs6vyuq/1