0

正如许多人所建议的那样，我接受了他们的建议并修改了我的问题。我拿出了很多代码，现在只显示了最低限度。希望这足以和清楚地重新打开我的问题。

我有以下小提琴：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 类的顺序随机化。所以只是classpart: 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 的类以随机顺序显示？

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

非常感谢

4

1 回答 1

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];
});
于 2013-04-08T23:33:25.973 回答