Question

我正在使用客户端基于HTML的网站，需要在刷新页面时随机订购一组Div。我通常会通过PHP和数据库调用来处理这个问题，但它是一个静态站点。

所以，我想知道是否有人知道如何使用jquery随机显示一组div？

以下是一个例子：

<div class="myItems">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
</div>

并在刷新时，它可能会更改为：

<div class="myItems">
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">1</div>
</div>

任何人都知道怎么做？

Answer 1

这样做

 function reorder() {
           var grp = $(".myItems").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".myItems").append($(grp));
       }

Answer 2

实际上这很简单：

$(".myItems").html($(".myItems .item").sort(function(){
    return Math.random()-0.5;
}));

就是这样！享受。

Answer 3

另一种简单的方法是...... 1.创建一个数组 2.生成一个随机数并检查它是奇数还是偶数 3.如果是奇数，请将div添加到顶部（shift方法）。如果是偶数，请将div添加到底部（推送方法）。所以这样你就可以在数组中随机排列你的div。 5.现在简单地加入数组并将其附加到您的页面。

var divArray = [];

for(var i=0; i<divs.length; i++){
  //generate random number
  if(rand_num == odd)
     divArray.push( div[i] );
  else
     divArray.shift( div[i] );
}

$(myElem).html( divArray.join("") );

使用jquery更改DIV顺序

3 个答案: