使用 jquery 更改 DIV 顺序答案

【问题标题】：Change DIV order with jquery使用 jquery 更改 DIV 顺序
【发布时间】：2010-06-18 17:08:31
【问题描述】：

我正在开发客户的基于 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>

有人知道怎么做吗？

【问题讨论】：

Randomize a sequence of div elements with jQuery 的可能重复项

标签： javascript jquery css

【解决方案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));
       }

【讨论】：

【解决方案2】：

其实很简单：

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

就是这样！享受吧。

【讨论】：

【解决方案3】：

另一种简单的方法是... 1.创建数组 2. 生成一个随机数并检查它是奇数还是偶数 3. 如果奇怪，将您的 div 添加到顶部（移位方法）。如果是偶数，请将您的 div 添加到底部（推送方法）。 4. 这样你的 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("") );

【讨论】：