【问题标题】:Randomizing the order of divs on page load with jquery? [duplicate]使用jquery在页面加载时随机化div的顺序? [复制]
【发布时间】:2014-02-03 02:03:13
【问题描述】:

我正在开发我的第一个网站(个人用于我的作品集)。 我在 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>

[...]等等。

感谢您的帮助! 谢谢!

【问题讨论】:

  • “找到了一些类似的问题,但没有任何工作” 哪些问题?你到底试过什么?这些元素是否全部(以及唯一的子元素)都属于同一个父元素?
  • 为什么要在属性中混用单引号和双引号?
  • @Scimonster - 有些男人只想看着世界燃烧

标签: jquery html random


【解决方案1】:

下面将把它们从 dom 中取出并随机打印出来。

$(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]);
}
});

【讨论】:

  • 这很完美!非常感谢您的帮助和工作!
  • & 详细步骤,真的很有帮助!
  • 您的第一步(div = []; 在无论如何都覆盖之前)和您的第三步(删除所有内容 - .empty(),首先,其次是 appending 其他地方的东西将它们从原始位置删除)是'没有必要。
  • @minitech 好点,更新的答案。
【解决方案2】:

试试这个:

var divs = [];
var divs_shuffle = shuffle($('.box').get());
for(var i in divs_shuffle){
  divs.push(divs_shuffle[i].outerHTML);
}
$('body').html(divs.join(''));

你可以在这里找到 shuffle() 函数https://stackoverflow.com/a/6274398/2604607

【讨论】:

    【解决方案3】:

    抱歉,回复晚了,希望对您有所帮助。 在这里你有一个现场小提琴:http://jsfiddle.net/J5z4n/1/ 和下面你有源代码。您可以将 10 替换为大于您的元素数量的另一个数字。 这个想法是保存目标标签的innerHTML,然后交换它们。

    var elements = $("div");
    var elementsInnerHtmls = [];
    var numberOfElements = elements.length;
    
    for( var i = 0 ; i < numberOfElements ; i++){
        elementsInnerHtmls.push(elements[i].innerHTML); 
    }
    
    var checkedIndexes = [];
    for( var i = 0 ; i < numberOfElements ; i++){
        var randomIndex = Math.floor(Math.random()*10) % numberOfElements;
        while(checkedIndexes[randomIndex] != undefined){
            randomIndex = Math.floor(Math.random()*10) % numberOfElements;    
        }
        checkedIndexes[randomIndex] = true;
        elements[i].innerHTML = elementsInnerHtmls[randomIndex];    
    }
    

    【讨论】:

      猜你喜欢
      • 2023-01-25
      • 1970-01-01
      • 2020-06-28
      • 2015-04-09
      • 2011-11-06
      • 2016-05-01
      • 2012-03-15
      相关资源
      最近更新 更多