Question

我试图在每次加载页面时使div以随机顺序出现。

我实现了以下代码：

<script type="text/javascript">
$(function() {
  $(window).load(function(){
    $("div.container").randomize("div.random");
  });
});
(function($) {
$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);
      elems.sort(function() { return (Math.round(Math.random())-0.8); });  
      $this.remove(childElem);  
      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      
  });    
}
})(jQuery);
</script>

<div class="container">
  <div class="random"> 1 </div>
  <div class="random"> 2 </div>
  <div class="random"> 3 </div>
  <div class="random"> 4 </div>
  <div class="random"> 5 </div>
  <div class="random"> 6 </div>
  <div class="random"> 7 </div>
  <div class="random"> 8 </div>
</div>

每次加载页面时，Div都会更改其位置/顺序。然而，统计上 - “1”往往几乎总是出现在“前4”中，相反“8”几乎总是出现在列表的底部！

这似乎不是真正的随机......我将非常感谢任何关于此的建议。非常重要的是，每个div都有同样的机会成为最重要的。

jsfiddle

Answer 1

我使用了 The Fisher-Yates（Knuth）Shuffle

维基百科页面： http://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle

查看原始SO帖子： How to randomize (shuffle) a JavaScript array?

请参阅原始GitHub页面：https://github.com/coolaj86/knuth-shuffle

在此处查看测试小提琴：http://jsfiddle.net/fabio_silva/NRfYJ/

function shuffle(array) {
  var currentIndex = array.length
    , temporaryValue
    , randomIndex
    ;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

Answer 2

试试这个

$(function () {
function shuffle(o) { 
    for (var j, x, i = o.length; i; j = Math.floor(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
};

var randomize = function (element) {
    var elems = shuffle($(element));
    $(".container").html('');
    for (var i = 0; i < elems.length; i++)
    $(".container").append(elems[i]);

}
randomize("div.random");
});

jsfiddle

的工作示例

Answer 3

http://jsfiddle.net/jpatel/92dJV/

试试这个 -

$.fn.randomize = function(selector){
    var $elems = selector ? $(this).find(selector) : $(this).children(),
        $parents = $elems.parent();

    $parents.each(function(){
        $(this).children(selector).sort(function(){
            return Math.round(Math.random()) - 0.5;
        }).remove().appendTo(this);
    });

    return this;
};

$('.container').randomize('div');

尝试使用jQuery使div显得随机，效果不令人满意

3 个答案: