随机div类顺序

Question

正如许多人所建议的那样，我已听取了他们的建议并改革了我的问题。 我拿出了很多代码，现在显示了最低限度的代码。 希望这足够清楚，足以再次提出我的问题。

我有以下小提琴： http : //jsfiddle.net/mauricederegt/vNpYe/5/

使用以下HTML：

<div id="main" tabindex="1">
            <div class="tile tile1" block-id="1" style-id="1" style="left:0px; top:0px"></div>
            <div class="tile tile3" block-id="2" style-id="2" style="left:100px; top:0px"></div>
            <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div>
            <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div>
            <div class="tile tile2" block-id="5" style-id="2" style="left:0px; top:100px"></div>
            <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div>
</div>

我正在尝试从div的班级中随机分配顺序。 因此，仅是class part： class="tile tile1" ，div的所有其他项应保持不变。

示例：随机化后的代码可能如下所示（请注意，仅对class进行了混洗）：

<div id="main" tabindex="1">
                <div class="tile tile3" block-id="1" style-id="1" style="left:0px; top:0px"></div>
                <div class="tile tile2" block-id="2" style-id="2" style="left:100px; top:0px"></div>
                <div class="tile tile1" block-id="3" style-id="1" style="left:200px; top:0px"></div>
                <div class="tile tile2" block-id="4" style-id="2" style="left:350px; top:0px"></div>
                <div class="tile tile1" block-id="5" style-id="2" style="left:0px; top:100px"></div>
                <div class="tile tile1" block-id="6" style-id="1" style="left:100px; top:100px"></div>
    </div>

``如何使div的类以随机顺序显示？

希望现在这个问题更加清楚。

非常感谢

Answer 1

首先，您需要一个数组的tile类。

var tiles = [],
tile_re = /tile(\d+)/;

$('.tile').each(function(i) {
    tiles[i] = this.className.match(tile_re)[0];
});

然后，您需要重新整理类的数组：

function shuffle(a)
{
  var t;

  for (var i = a.length - 1; i > 0; --i) {
    var p = Math.floor(Math.random() * (i + 1));
    if (p !== i) {
      t = a[i];
      a[i] = a[p];
      a[p] = t;
    }
  }
}

shuffle(tiles);

最后，将结果合并回去：

$('.tile').each(function(i) {
  this.className = 'tile ' + tiles[i];
});