從數組中隨機選擇多於一次的克隆Div

Question

我正在隨機顯示一定數量的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"); 
    } 

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

Updated fiddle