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部分：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];
});

随机div类顺序

1 个答案: