顯示項目列表中的項目

Question

我有一個樣本：

關聯

我希望帶有"item-extra" class 的項目隨機顯示在項目列表中。

現在，代碼重新排列了所有元素。

我希望 rest 保持固定，並且只有帶有"item-extra ” class 的那個將被移動到每個頁面重新加載。

 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() function 來執行此操作。

例子：

 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>