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

Question

我随机显示一定数量的 div。但是，我想允许重复 divs，所以我假设我需要克隆多次选择的 divs。除了克隆部分，我什么都有，如图所示 fiddle:

如您所见，如果多次选择 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");
    }

Answer 1

您可以在这里大大简化您的逻辑。首先设置一个 .item 元素的单一池，这些元素不会改变，你可以从随机使用到 select。然后你可以有一个容器来附加原件的克隆。然后，您可以删除三个循环，只使用一个循环运行，其中 select 是一个随机的 .item div。试试这个：

$("#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

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

Clone Div When Randomly Chosen More Than Once from Array

jquery

arrays

cloning