jQuery 随机排列div元素序列

在本文中，我们将介绍如何使用jQuery随机排列一列div元素的序列。随机排列可以为网站添加一些变化性和趣味性，帮助提升用户体验。通过以下步骤，您将能够轻松地实现这一效果。

准备工作

在开始编写代码之前，我们需要引入jQuery库。您可以在head标签内添加以下代码来引入最新版本的jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

接下来，我们需要创建一列div元素。在以下示例代码中，我们创建了5个具有相同样式的div元素：

<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>

请注意，这里的box类只是一个示例，您可以根据需要修改为您自己的类名。

随机排列div元素

当我们完成了准备工作后，我们可以开始编写代码来实现随机排列div元素的效果。我们可以使用Math.random()函数来生成一个0到1之间的随机数，并将其应用到div元素的顺序中。

$(function() {
  var boxes = $(".box");

  for (var i = boxes.length; i > 0; i--) {
    var randomIndex = Math.floor(Math.random() * i);
    var randomBox = boxes[randomIndex];
    var currentBox = boxes[i - 1];

    $(currentBox).before($(randomBox));
  }
});

在上面的代码中，我们首先使用$(".box")选择器获取所有的box元素，并将其存储在一个变量中。然后，我们使用一个for循环来遍历这些元素。

在每一次循环中，我们使用Math.random()函数生成0到i之间的随机数，并将其赋值给randomIndex变量。接下来，我们使用boxes[randomIndex]获取具有该随机索引的div元素，并将其存储在randomBox变量中。

然后，我们获取当前的div元素并将其存储在currentBox变量中。最后，我们使用$(currentBox).before($(randomBox))方法将当前的div元素插入到随机选择的div元素的前面。

通过循环的执行，所有的div元素将被随机排列。

示例

让我们通过一个简单的示例来展示随机排列div元素的效果。

首先，我们创建了一个包含6个div元素的网页。每个div元素代表一个不同的颜色块，包含一个唯一的id和类名：

<div id="div1" class="box color1"></div>
<div id="div2" class="box color2"></div>
<div id="div3" class="box color3"></div>
<div id="div4" class="box color4"></div>
<div id="div5" class="box color5"></div>
<div id="div6" class="box color6"></div>

接下来，我们使用以下代码来随机排列div元素：

$(function() {
  var boxes = $(".box");

  for (var i = boxes.length; i > 0; i--) {
    var randomIndex = Math.floor(Math.random() * i);
    var randomBox = boxes[randomIndex];
    var currentBox = boxes[i - 1];

    $(currentBox).before($(randomBox));
  }
});

当我们加载网页时，div元素将被随机排列。每次刷新页面都会得到一个新的随机顺序。