随机jQuery的页面加载div的顺序？ [英] Randomizing the order of divs on page load with jquery?

问题描述

我正在处理我的第一个网站（个人使用我的投资组合）。
我有div中的内容，但希望它们在每次页面重新加载时随机重新排序。我试图寻找解决方案，发现了一些类似的问题，但没有得到任何工作（也许这是因为我的内容有多个类？）。

我是什么

 < div class =box work_self work_all> 
< img src =1.jpg'/> 
< / div> 
< div class =box work_group work_all> 
< img src =2.jpg'/> 
< / div> 
< div class =box work_group work_all> 
< img src =3.jpg'/> 
< / div> 
  

[...]等等。

帮助表示感谢！
谢谢！

解决方案

以下内容将使他们脱离dom并随机打印出来。

  $（document）.ready（function（）{
 //获取div列表
 var div = $（。box）。toArray（）; 
 
 $ while（div.length> 0）{
 var idx = Math.floor（（Math.random（）*（div.length-1））$ b $ //随机打印出来。 ）; 
 var element = div.splice（idx，1）; 
 $（'body'）。append（element [0]）; 
} 
}）; 
  

I'm working on my first website (personal use for my portfolio). I have content in divs, but want them to reorder in randomly each time the page is reloaded. I tried to search for solutions, found a few similar questions, but didn't get anything to work (maybe it's because my content has multiple classes?).

what i have inside the body tags is is:

<div class="box work_self work_all">
<img src="1.jpg' />
</div>
<div class="box work_group work_all">
<img src="2.jpg' />
</div>
<div class="box work_group work_all">
<img src="3.jpg' />
</div>

[...]and so on.

Help is appreciated! Thanks!

解决方案

The following will get them out of the dom and print them back out randomly.

$(document).ready(function() {
//get list of divs
var div = $(".box").toArray();

//randomly print them back out.
while(div.length > 0) {
    var idx = Math.floor((Math.random() * (div.length-1)));
    var element = div.splice(idx, 1);
    $('body').append(element[0]);
}
});

这篇关于随机jQuery的页面加载div的顺序？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！