显示项目列表中的项目

Question

我有一个样本：

link

我希望 "item-extra" 类的项目随机显示在项目列表中。

现在，代码重新排列所有元素。

我希望其余部分保持固定，并且只有具有 "item-extra" 类的那个会被移动到每个页面重新加载。

var ul = document.querySelector('ul');
for (var i = ul.children.length; i >= 0; i--) {
  ul.appendChild(ul.children[Math.random() * i | 0]);
}

.item-extra {
  color: red;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li class="item-extra">item extra</li>
</ul>

Answer 1

您可以使用 .insertBefore() 函数来做到这一点。

例子：

var ul = document.querySelector('ul');
var itemExtra = document.querySelector('.item-extra');
var ulLength = ul.children.length;

ul.insertBefore(itemExtra, ul.children[Math.random() * ulLength | 0]);

.item-extra {
  color: red;
}

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
  <li>item 5</li>
  <li class="item-extra">item extra</li>
</ul>