将前四个列表项移动到列表末尾。

Question

我有一个包含多个 <li> 元素的列表，

<ul>
    <li>a</li>
    <li>b</li>
    <li>c</li>
    <li>d</li>
    <li>e</li>
    <li>f</li>
    <li>g</li>
    <li>h</li>
</ul>

上下文是我想在iOS中跨越一个占用1,000个内存的列表中重复使用li元素。目标是显示前4个元素，其余的4个被隐藏，容器一次显示4个项目。

在滚动（按钮点击）时，我将动画化列表并滑入另外4个，在动画结束时，将前4个

项移向列表的末尾（然后为

重置位置到）。

我的问题是如何在纯JavaScript中获取第一个元素并将其添加到末尾。（我通过TweenLite处理动画）

附加奖励：如果您可以建议一些更好的优化技术或库来显示众多元素。

- user3610227

---

只是为了明确，您想要重复使用列表项的值还是仅仅是列表元素？ - Jordan Davis

Answer 1

这里是如何使用纯JS实现的。您可以使用getElementsByTagName()访问

元素，并使用slice()获取前四个。然后，您可以通过shift()将它们从数组中弹出，并使用appendChild()将它们放在末尾添加到

中。

这里有工作的JSFiddle。

function moveEle() {
    var ele = document.getElementsByTagName("li");
    //getElementsByTagName() returns a collection, so we bind the slice function to it
    var fourEle = Array.prototype.slice.call( ele, 0, 4);
    var ul = document.getElementsByTagName("ul")[0];

    while (fourEle.length > 0) {
        //Pop the first element from the 4 and add it to the end
        ul.appendChild(fourEle.shift());
    }
}

document.getElementById("clickMe").onclick = moveEle;

编辑： 要在开头添加一个元素，请使用insertBefore()而不是appendChild()。在上面的示例中，您还需要使用pop()而不是shift()。

- Parker

---

有没有一种函数可以将项目添加到ul列表的开头？ - user3610227

太棒了。谢谢 @Parker - user3610227

Answer 2

您可以使用getElementsByTagName()获取一个NodeList来进行迭代，例如：

var list = document.getElementById("yourUlItem").getElementsByTagName("li");

你可以使用数组的 slice 函数来捕获所有子集，通过保留正确的索引以便捕获集合：

var firstFour = list.slice(0, 3);

- KAD

---

请使用纯JavaScript（无jQuery）向列表中添加一些代码以将它们从列表中删除并添加到末尾。 - user3610227