Клон Div при случайном выборе более одного раза из массива

Question

Я отображаю определенное количество дивов в случайном порядке. Тем не менее, я хочу разрешить повторение 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");
    }

Answer 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());
  }
});

Обновленная скрипка