Я работаю над клиентским сайтом, основанным на HTML, и мне нужно случайным образом заказать набор Div при обновлении страницы. Я бы обычно справлялся с этим через PHP и вызов базы данных, но это статический сайт.

Итак, мне интересно, если кто-нибудь знает, как случайным образом отобразить набор div с использованием jquery?

Вот пример:

<div class="myItems">
     <div class="item">1</div>
     <div class="item">2</div>
     <div class="item">3</div>
</div>

И при обновлении это может измениться на:

<div class="myItems">
     <div class="item">2</div>
     <div class="item">3</div>
     <div class="item">1</div>
</div>

Кто-нибудь знает, как это сделать?

4
Troy 18 Июн 2010 в 21:08

3 ответа

Лучший ответ

На самом деле все довольно просто:

$(".myItems").html($(".myItems .item").sort(function(){
    return Math.random()-0.5;
}));

Это оно! Наслаждаться.

1
Slavik Meltser 20 Окт 2013 в 16:48

Это сделает это

 function reorder() {
           var grp = $(".myItems").children();
           var cnt = grp.length;

           var temp,x;
           for (var i = 0; i < cnt; i++) {
               temp = grp[i];
             x = Math.floor(Math.random() * cnt);
             grp[i] = grp[x];
             grp[x] = temp;
         }
         $(grp).remove();
         $(".myItems").append($(grp));
       }
8
josephj1989 18 Июн 2010 в 17:30

Другой простой способ - это ... 1. создать массив 2. сгенерировать случайное число и проверить, является ли оно нечетным или четным 3. Если нечетное, добавьте свой div в начало (метод shift). Если даже, добавьте ваш div внизу (метод push). 4. Таким образом, ваши дивы будут расположены случайным образом в массиве. 5. Теперь просто присоедините массив и добавьте его на свою страницу.

var divArray = [];

for(var i=0; i<divs.length; i++){
  //generate random number
  if(rand_num == odd)
     divArray.push( div[i] );
  else
     divArray.shift( div[i] );
}

$(myElem).html( divArray.join("") );
0
Ashit Vora 18 Июн 2010 в 19:37