Question

我有一个样本：

我希望将"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（）函数来完成此操作。

示例：

woocommerce

<?php if ( is_page('woocommerce') ): ?>

  <div id="banner">
    <h2>New shop is open!</h2>
  </div>

<?php endif; ?>

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]);

显示项目列表中的项目

1 个答案: