Javascript 随机序div

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

CSS

HTML

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

我应该注意到上面的JS是从另一个问题中使用的。我不完全理解

Math.random（）

，也不确定如何随机显示它显示的50个div

---

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

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

然后在显示前50个的无序数组中循环

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

for（变量i=0；i<50；i++）{
var thisOne=$（$（$（“div.question”）[shuffled[i]]；
thisOne.parent（）.append（thisOne）；
这个。show（）；
}

---

我不能保证这将复制粘贴并起作用，但它应该可以让您开始。

要重新排序页面上的div，您需要按无序顺序重新添加它们。您当前正在做的是获取元素，选择50个元素并显示它们（以随机顺序，但不更改它们在dom中的位置）

而不是

$（divs.show（）使用

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

另外，请注意。
听起来您实际上想要在页面上移动元素

假设问题在容器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();

这些问题是在HTML中硬编码的，还是通过PHP从服务器加载的？@j08691-它们是在页面中硬编码的。可能是重复的，等等。。。看起来你已经在做了。可能的重复不是OP想要的。他们已经随机显示了50个问题，他们需要做的是在页面上重新排列它们。好的，添加代码不仅显示随机问题，而且还将其添加到显示列表的末尾，从而对其重新排序。简单的解决方案效果很好！感谢您提供有关排序（）的提示。

。

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

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

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

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