javascript - Javascript循环
一键旋转列表

Question

我在下面有以下函数，它应该通过 4 个项目的列表旋转/循环，这确实通过 onclick 起作用。但是，用户必须单击两次才能执行循环。

function rotateList(){
var list = document.getElementById("arrange");
var first = list.removeChild(list.firstChild);
list.appendChild(first);
}

有谁知道如何一键完成上述工作？

提前谢谢了。

score 3 · Accepted Answer

function rotateList() {
    var list = document.getElementById("arrange");
    list.appendChild(list.firstElementChild);
}

请注意，任何 DOM 节点在文档中只能存在一次。如果您将其附加到一个位置，它将在其原始位置被删除。

这种方式附加第一个子节点具有预期的效果。

firstElementChild给你“真正的”第一个孩子，同时firstChild也给你可能出现在元素之间的（空白）文本节点，这就是让你点击两次的原因。但是，firstElementChild在 IE9 之前不支持。其他浏览器都没有问题。

javascript - Javascript循环一键旋转列表