随机化 <li> 元素的顺序，但按类对它们进行分组

Question

我正在寻找一种方法来使用 jQuery 随机化 <li> 列表的顺序，但将它们按类分组。因此，如果我有 3 个级别的 <li>，我希望它们以随机顺序出现在我的 <ul> 中，但同时将最高级别（由其类定义）的 <li> 保持在顶部，然后将第二高组也以随机顺序排列，依此类推。

我已经设法使用一个函数来随机重新排序项目，但无法按级别对它们进行分组。我的jQuery知识很基础。

随机排序前的示例代码

<ul id="myList">
    <li class="level3"><a href="">Link #1</a></li>
    <li class="level3"><a href="">Link #2</a></li>
    <li class="level3"><a href="">Link #3</a></li>

    <li class="level2"><a href="">Link #4</a></li>
    <li class="level2"><a href="">Link #5</a></li>
    <li class="level2"><a href="">Link #6</a></li>
    <li class="level2"><a href="">Link #7</a></li>

    <li class="level1"><a href="">Link #8</a></li>
    <li class="level1"><a href="">Link #9</a></li>
    <li class="level1"><a href="">Link #10</a></li>
    <li class="level1"><a href="">Link #11</a></li>
    <li class="level1"><a href="">Link #12</a></li>
</ul>

已编辑：这是我用来随机排序的脚本

var items = $("#myList > li");
for(var i = 0; i < items.length; i++){
    var target = Math.floor(Math.random() * items.length -1) + 1;
    var target2 = Math.floor(Math.random() * items.length -1) +1;
    items.eq(target).before(items.eq(target2));
}

我希望随机生成类似这个订单的东西。

<ul id="myList">
    <li class="level3"><a href="">Link #3</a></li>
    <li class="level3"><a href="">Link #1</a></li>
    <li class="level3"><a href="">Link #2</a></li>

    <li class="level2"><a href="">Link #6</a></li>
    <li class="level2"><a href="">Link #4</a></li>
    <li class="level2"><a href="">Link #7</a></li>
    <li class="level2"><a href="">Link #5</a></li>

    <li class="level1"><a href="">Link #10</a></li>
    <li class="level1"><a href="">Link #12</a></li>
    <li class="level1"><a href="">Link #9</a></li>
    <li class="level1"><a href="">Link #8</a></li>
    <li class="level1"><a href="">Link #11</a></li>
</ul>

Answer 1

你几乎在那里。您现在需要的唯一更改是逐级考虑项目，而不是一起考虑。您可以通过根据包含特定数字的类过滤它们来做到这一点。例如：

var items = $("#myList > li[class*=3]");

只会找到类名包含 3 的项目，在您的示例中，这将是所有“级别 3”项目。当你洗牌时，其余部分保持不变。

因此，总体而言，您需要迭代这些级别，并分别对每个级别进行洗牌。类似的东西：

var levels = ['1', '2', '3']
levels.forEach(function(level) {
  var items = $("#myList > li[class*=" + level + "]");
  for(var i = 0; i < items.length; i++){
      var target = Math.floor(Math.random() * items.length -1) + 1;
      var target2 = Math.floor(Math.random() * items.length -1) +1;
      items.eq(target).before(items.eq(target2));
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<ul id="myList">
    <li class="level3"><a href="">Link #1</a></li>
    <li class="level3"><a href="">Link #2</a></li>
    <li class="level3"><a href="">Link #3</a></li>

    <li class="level2"><a href="">Link #4</a></li>
    <li class="level2"><a href="">Link #5</a></li>
    <li class="level2"><a href="">Link #6</a></li>
    <li class="level2"><a href="">Link #7</a></li>

    <li class="level1"><a href="">Link #8</a></li>
    <li class="level1"><a href="">Link #9</a></li>
    <li class="level1"><a href="">Link #10</a></li>
    <li class="level1"><a href="">Link #11</a></li>
    <li class="level1"><a href="">Link #12</a></li>
</ul>
</div>