隨機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];
});