随机排序的 div答案

【问题标题】：Random Ordered Divs随机排序的 div
【发布时间】：2014-04-06 20:37:29
【问题描述】：

我有一个包含 100 多个问题的测验。加载问题时，仅显示 50 个问题。其余的都是隐藏的。我正在使用以下代码：

CSS

.question{
   display:none;
}

HTML

<div class="question">
    <!-- Code for Each Question -->
</div>

<!-- Repeat 'question div' for every question. -->

var divs = $("div.question").get().sort(function(){ 
   return Math.round(Math.random())-0.5;
}).slice(0,50)
$(divs).show();

上面的代码效果很好，但是，我想以随机顺序显示 50 个问题，而不是只显示 50 个问题。如何修改我的代码，使其不仅只显示 50 个问题，而且以随机顺序显示它们？

我应该注意到上面的 JS 是从另一个问题中使用的。我不完全理解 Math.random() 并且不确定如何随机显示它所显示的 50 个 div。

注意：解决方案必须是纯客户端代码。

【问题讨论】：

问题是在 HTML 中硬编码，还是通过 PHP 从服务器加载？
@j08691 - 它们在页面中被硬编码。
Select 5 random elements 的可能重复项
呃等等……看来你已经在这样做了。
How to randomize (shuffle) a javascript array?的可能重复

标签： javascript jquery random

【解决方案1】：

首先，创建一个包含 0-99 的数组（如果您有 100 个问题）

var arr = new Array();
for(var i=0; i < 100; i++){
arr[i] = i;
}

然后打乱数组

var shuffle = function(o){ //v1.0
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};
var shuffled = shuffle(arr);

然后循环显示前 50 个随机排列的数组。

    for(var i = 0; i < 50; i++){
var thisOne = $($("div.question")[shuffled[i]]);
thisOne.parent().append(thisOne); 
    thisOne.show();
    }

我不能保证这将复制粘贴并工作，但它应该让你开始。

【讨论】：

这不是 OP 想要的。他们已经有 50 个随机展示了，他们需要做的是在页面上重新排列它们。
好的，添加代码不仅显示随机问题，而且将其添加到显示列表的末尾，因此重新排序。

【解决方案2】：

要对页面上的 div 重新排序，您需要以打乱顺序重新附加它们。您目前正在做的是获取元素，选择其中的 50 个并显示它们（以随机顺序，但不改变它们在 dom 中的位置）。

而不是$(divs).show(); 使用

$(divs).appendTo(questionContainer).show();

还要注意你shouldn't use sort() to shuffle an array。

【讨论】：

运行良好的简单解决方案！感谢sort() 的提示。

【解决方案3】：

听起来您确实想在页面上移动元素。

假设问题在容器 div 中，这样的事情可能会奏效：

var $divs = $("div.question").sort(function(){ 
   return Math.round(Math.random())-0.5;
}).slice(0,4)

// remove them
$divs.detach();

// reposition them
$('#questionContainer').append($divs);

// show
$divs.show();

【讨论】：