javascript - 显示项目列表中的项目
问题描述
我有一个样本:
我希望"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>
解决方案
您可以使用 .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>