gpt4 book ai didi

javascript - 随机/随机化一组具有两个子元素的 div

转载 作者:行者123 更新时间:2023-12-03 08:00:17 24 4
gpt4 key购买 nike

预先感谢您阅读本文。

我有一组 div(在网格中)并尝试在每个页面加载时实现随机/随机播放顺序。本质上这不是什么大问题,但关键是我有一个父级 div(网格)和几个子级(level-1),这些子级又有几个子级(level-2)。

使用一点 jQuery,我已经在每个页面加载时实现了 1 级 div 的随机顺序,但我也需要 2 级 div 的随机顺序。

如果起始顺序如下所示(例如):
A - B - C
D - E - F
G-H-I

我需要这样的新订单(例如):
G - A - D
C - F - H
I - B - E

感谢您的每一次帮助!

我做了一个 fiddle : https://jsfiddle.net/tns9qumn/

$(function() {
var parent = $(".grid");
var divs = parent.children();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
.level-2 {
width: 3rem;
height: 3rem;
background-color: black;
margin: .5rem;
color: white;
display: inline-block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid">
<div class="level-1">
<div class="level-2">A</div>
<div class="level-2">B</div>
<div class="level-2">C</div>
</div>
<div class="level-1">
<div class="level-2">D</div>
<div class="level-2">E</div>
<div class="level-2">F</div>
</div>
<div class="level-1">
<div class="level-2">G</div>
<div class="level-2">H</div>
<div class="level-2">I</div>
</div>
</div>

最佳答案

不确定,但试试这个?

$.fn.randomize = function(a,b) {
return this.each(function() {
var $this = $(this);
var elems = $this.children(a).children(b);
var len = $this.find(a).eq(0).find(b).length;

elems.sort(function() { return (Math.round(Math.random())-0.5); });

$this.detach(a);

for(var i=0; i < elems.length; i++) {
$this.find(a).eq(i%len).append(elems[i]);
}

});
}

$('.grid').randomize('.level-1','.level-2');

演示:https://jsfiddle.net/l2aelba/rpnyamnL/

原文作者:https://stackoverflow.com/a/1533945/622813

关于javascript - 随机/随机化一组具有两个子元素的 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34614086/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com