Question

提前感谢您阅读本文。

我有一组div（在网格中）并尝试在每个页面加载时实现随机/随机顺序。基本上这不是什么大问题，但关键是我有一个父div（网格）有几个孩子（1级），这些孩子又有几个孩子（2级）。

使用一个小jQuery，我已经在每个页面加载时完成了level-1 div的随机顺序，但我也需要一个level-2 div的随机顺序。

如果起始顺序如下所示（例如）：
A - B - C
D - E - F
G - H - I

我需要这样的新订单（例如）：
G - A - D
C - F - H
I - B - E

感谢您的帮助！

我做了一个小提琴： https://jsfiddle.net/tns9qumn/

＆＃13;

$(function() {
  var parent = $(".grid");
  var divs = parent.children();
  while (divs.length) {
    parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
  }
});

＆＃13;

.level-2 {
  width: 3rem;
  height: 3rem;
  background-color: black;
  margin: .5rem;
  color: white;
  display: inline-block;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
  <div class="level-1">
    <div class="level-2">A</div>
    <div class="level-2">B</div>
    <div class="level-2">C</div>
  </div>
  <div class="level-1">
    <div class="level-2">D</div>
    <div class="level-2">E</div>
    <div class="level-2">F</div>
  </div>
  <div class="level-1">
    <div class="level-2">G</div>
    <div class="level-2">H</div>
    <div class="level-2">I</div>
  </div>
</div>

＆＃13;

Answer 1

不确定，但试试这个？

$.fn.randomize = function(a,b) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(a).children(b);
      var len = $this.find(a).eq(0).find(b).length;

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.detach(a);  

      for(var i=0; i < elems.length; i++) {
        $this.find(a).eq(i%len).append(elems[i]);
      }

  });    
}

$('.grid').randomize('.level-1','.level-2');

演示：https://jsfiddle.net/l2aelba/rpnyamnL/

原文：https://stackoverflow.com/a/1533945/622813

Answer 2

您可以将所有“level-2”<div>放入数组中，然后将其重新排列并重新创建网格。

对于随机播放功能，您可以看到here

随机/随机化一组具有两个子元素的div

2 个答案: