Question

这就是我所拥有的：

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

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

如何将它们随机附加到容器？因此，每次加载页面时，订单都会有所不同。

提前谢谢！

Answer 1

您可以通过获取一些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

Answer 2

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

生成介于0和1之间的随机数，并根据它，追加或添加元素

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

Answer 3

<强> EDITED

您可以这样做：

//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;
}

Answer 4

像这样使用：

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

Answer 5

您也可以这样使用：

$('.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

Answer 6

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

Answer 7

$.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/

随机化我追加到另一个的div

7 个答案: