从数组中多次随机选择时克隆 Div答案

【问题标题】：Clone Div When Randomly Chosen More Than Once from Array从数组中多次随机选择时克隆 Div
【发布时间】：2015-12-07 17:45:33
【问题描述】：

我正在随机显示一定数量的 div。但是，我想允许重复 div，所以我假设我需要克隆多次选择的 div。除了克隆部分，我什么都有，如下小提琴所示：

http://jsfiddle.net/Ly7pe4n7/

如您所见，如果一个 div 被多次选择，它只会显示它的第一个实例。如果有人可以在必要时提供帮助克隆，那就太好了。谢谢。以下是到目前为止的 jQuery 代码：

$("#button").click(function() {
  $("div.item").css("display", "none");
  var idValues = [];
  var randomValues = [];
  $("div.item").each(function() {
    idValues.push($(this).attr("data-id"));
  });
  for (var i = 0; i < 4; i++) {
    randomValues.push(idValues[Math.floor(Math.random() * idValues.length)]);
  }
  for (var j = 0; j < randomValues.length; j++) {
    group = randomValues[j];
    $('div.item').each(function() {
      if ($(this).attr("data-id") == group) {
        $(this).css("display", "block");
      }
    });
  }
});

编辑：我在想我需要插入这样的东西：

if ( $(this).length ) {
        $this.clone().appendTo("#container").css("display", "block");
    }

【问题讨论】：

您的代码仅显示/隐藏现有 div，不会进行创建/销毁/克隆。你想要的效果是什么？
已编辑以显示我对克隆的想法，但 Rory 回答得很好：当一个 div 被多次选择时，它会通过克隆多次显示。

标签： jquery arrays cloning

【解决方案1】：

您可以在这里大大简化您的逻辑。首先建立一个.item元素池，这些元素不会改变，你可以用来随机选择。然后你可以有一个容器来附加原始的克隆。然后你可以删除三个循环，只运行一个循环，它会为你选择一个随机的.itemdiv。试试这个：

$("#button").click(function() {
  var $poolDivs = $('#pool .item');
  var $randomContainer = $('#random').empty();
  for (var i = 0; i < 4; i++) {
    $randomContainer.append($poolDivs.eq(Math.floor(Math.random() * $poolDivs.length)).clone());
  }
});

Updated fiddle

【讨论】：

哇，非常感谢 Rory，这确实没有简化它。这正是我想要做的。