将我附加到另一个的 div 随机化

Posted 2023-02-25

【中文标题】将我附加到另一个的 div 随机化

【英文标题】：Randomize the divs that I append into another one

【发布时间】：2014-09-21 15:54:33

【问题描述】：

这就是我所拥有的：

$(function()
    $('.apple').appendTo('.container');
);

现在，假设我有 20 个不同的 div，类名为 .apple。

我怎样才能让它们容器 随机添加？所以每次我加载页面时，顺序都会不同。

提前谢谢你！

【问题讨论】：

可能重复***.com/questions/1533910/…

【参考方案1】：

$.when($(".apples"), [])
    .done(function (data, apples) 
    $.each(data, function (k, v) 
        setTimeout(function () 
            apples.push(v);
            if (apples.length === data.length) 
                $(apples).appendTo(".container")
            ;
        , 1 + Math.floor(Math.random() * 5));
    );
);

jsfiddle http://jsfiddle.net/guest271314/d4p39/

【参考方案2】：

Try Something like this:

html Code :

<div class="wrapper"><div class="apple">Apple</div></div>
<button id="test">Add</button>
<div class="container"></div>

js code :

  $('#test').click(function()
    var div_length = $('.container .apple').length;
    var rand = Math.floor(Math.random() * div_length);
    if($(".container").children().length > 0)
        $(".container .apple:eq("+rand+")").after(jQuery('.wrapper').html()).attr('rand',rand);
    else
        $(".container").append(jQuery('.wrapper').html());
  );

 Note : I have taken wrapper to .apple class and have fired click event on button to append div

【参考方案3】：

已编辑

你可以这样做：

//create an array equals number of .apple
var arr = [];

$(".apple").each(function(index)
    arr.push(index);//create an array with index
);

var shuffled_array = shuffle(arr);//shuffle the array

shuffled_array.forEach(function(index) 
    $(".apple:eq("+index+")").appendTo('.container');
);

function shuffle(array)  //Fisher–Yates Shuffle function
  var m = array.length, t, i;

  // While there remain elements to shuffle…
  while (m) 

    // Pick a remaining element…
    i = Math.floor(Math.random() * m--);

    // And swap it with the current element.
    t = array[m];
    array[m] = array[i];
    array[i] = t;
  

  return array;

【讨论】：

同一个随机数生成两次怎么办？？

【参考方案4】：

你也可以这样使用：

$('.apple').sort(function(a,b)
  var tmp = parseInt( Math.random()*20 );
  var isOE = tmp % 2;
  var isPN = tmp > 10 ? 1 : -1;
  return( isOE * isPN );
).appendTo('.container');

for more details view this

【参考方案5】：

为您提供一种可用于任意数量元素的方法。

生成 0 到 1 之间的随机数，并根据它附加或添加元素

$('.apple').each(function()
   var j = Math.floor(Math.random() * 2);
   if(j== 0)
       $('.container').append($(this)); 
   else 
       $('.container').prepend($(this)); 
);

【参考方案6】：

您可以通过获取一些random 值来尝试下面的代码并将其用于if / else 条件：

$(function()
    $('.apple').each(function()
       var random = ((Math.random()*100) + 50).toFixed();

       if(random > 100)
          $('.container').append($(this)); 
       else if(random < 100)
           $('.container').prepend($(this)); 
        else
        
          var childCount = $('.container').children().length;
            $('.container').find('div:eq('+(childCount/2)+')').append($(this));   
        
    );
);

Demo

【参考方案7】：

这样使用：

var idx;
$('.apple').each(function()
   idx = Math.floor(Math.random() * 20) +1;
   $(this).eq(idx).appendTo('.container');
);