随机播放来自多个框的 div
Shuffle divs from multiple boxes onload
我得到了 3 个不同内容的盒子,它们会随机加载。
<div class="shuffle style">
<div>A1</div>
<div>A2</div>
<div>A3</div>
<div>A4</div>
<div>A5</div>
<div>A6</div>
<div>A7</div>
<div>A8</div>
<div>A9</div>
</div>
<div class="shuffle2 style">
<div>B1</div>
<div>B2</div>
<div>B3</div>
<div>B4</div>
<div>B5</div>
<div>B6</div>
<div>B7</div>
<div>B8</div>
<div>B9</div>
</div>
<div class="shuffle3 style">
<div>C1</div>
<div>C2</div>
<div>C3</div>
<div>C4</div>
<div>C5</div>
<div>C6</div>
<div>C7</div>
<div>C8</div>
<div>C9</div>
</div>
我使用这段代码来随机播放:
$(function () {
var parent = $(".shuffle");
var divs = parent.children().remove();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
当所有 3 个盒子都具有相同的 class (.shuffle) 时,混合是不正确的。
所以我为每个盒子添加了一个脚本,其中包含一个新的 class-name (shuffle2, shuffle3).
是否可以在一个脚本中调用此函数?
查看我的工作 Fiddle 3 个脚本 here
只需使用$.each()
<div class="shuffle style">
<div>A1</div>
<div>A2</div>
<div>A3</div>
<div>A4</div>
</div>
<div class="shuffle style">
<div>B1</div>
<div>B2</div>
<div>B3</div>
<div>B4</div>
</div>
<div class="shuffle style">
<div>C1</div>
<div>C2</div>
<div>C3</div>
<div>C4</div>
</div>
$(function () {
$(".shuffle").each(function () {
var parent = $(this),
divs = parent.children().remove();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
});
我得到了 3 个不同内容的盒子,它们会随机加载。
<div class="shuffle style">
<div>A1</div>
<div>A2</div>
<div>A3</div>
<div>A4</div>
<div>A5</div>
<div>A6</div>
<div>A7</div>
<div>A8</div>
<div>A9</div>
</div>
<div class="shuffle2 style">
<div>B1</div>
<div>B2</div>
<div>B3</div>
<div>B4</div>
<div>B5</div>
<div>B6</div>
<div>B7</div>
<div>B8</div>
<div>B9</div>
</div>
<div class="shuffle3 style">
<div>C1</div>
<div>C2</div>
<div>C3</div>
<div>C4</div>
<div>C5</div>
<div>C6</div>
<div>C7</div>
<div>C8</div>
<div>C9</div>
</div>
我使用这段代码来随机播放:
$(function () {
var parent = $(".shuffle");
var divs = parent.children().remove();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
当所有 3 个盒子都具有相同的 class (.shuffle) 时,混合是不正确的。 所以我为每个盒子添加了一个脚本,其中包含一个新的 class-name (shuffle2, shuffle3).
是否可以在一个脚本中调用此函数?
查看我的工作 Fiddle 3 个脚本 here
只需使用$.each()
<div class="shuffle style">
<div>A1</div>
<div>A2</div>
<div>A3</div>
<div>A4</div>
</div>
<div class="shuffle style">
<div>B1</div>
<div>B2</div>
<div>B3</div>
<div>B4</div>
</div>
<div class="shuffle style">
<div>C1</div>
<div>C2</div>
<div>C3</div>
<div>C4</div>
</div>
$(function () {
$(".shuffle").each(function () {
var parent = $(this),
divs = parent.children().remove();
while (divs.length) {
parent.append(divs.splice(Math.floor(Math.random() * divs.length), 1)[0]);
}
});
});