随机div类订单

正如许多人所建议的那样，我接受了他们的建议并改革了我的问题。我拿出了很多代码，现在只显示最少的代码。希望这足以让我重新提出我的问题。随机div类订单

我有以下小提琴： 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的类以随机顺序显示？

希望现在的问题更加清楚。

非常感谢

来源

2013-03-31 Maurice

是在演示审查代码荒谬量。特别是因为你还没有定义什么'shuffle style'甚至意味着什么，或者什么样的层次或级别在演示的上下文中意味着什么。应该缩小演示的范围，以呈现足够的代码来呈现问题，而不是整个应用程序。当然，你可以删除大部分渲染代码，并用静态html代替，只需要足够的脚本来处理你正在尝试做的任何事情。 – charlietfl

我不同意代码量。我摆弄它获得额外的支持。删除它或其中的评论，会使事情变得更加模糊。尽管如此，我发现了一个书面错误。我修补了div的课程，而不是风格。更正了此问题并添加了一个额外的HTML示例 – Maurice

@Maurice：如果您想了解如何在jQuery中执行某个特定操作，请提供该问题的最简单版本。想象一下，在计算机课程的第一天，你就是一名教师。你会如何向学生展示它，以便他们确切地了解问题的本质（在问他们或教他们如何解决这类基本问题之前）？这是在Stackoverflow上提问的方式。研究这个问题，直到你理解这个问题，并把它简化为最简单的形式。 –

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

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-08 23:33:25

谢谢你完美的作品。如果其他人想看到它在行动，我已经做了一个小提琴：http://jsfiddle.net/mauricederegt/EFCex/ – Maurice

随机div类订单

回答

相关问题