将前四个列表项移至列表末尾

所以我有一个包含几个的列表<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>

上下文是我想重用liiOS 的 1,000 个内存密集型列表中的元素。目标是显示前 4 个元素，其余 4 个元素被隐藏，容器一次显示 4 个项目。

在滚动（点击按钮）时，我将对列表进行动画处理并在其他 4 个中滑动，并在动画结束时移动前 4 个li靠近列表末尾的项目（然后将位置重置为left: 0为了ul)

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

Bonus:在显示大量元素时，您是否可以建议一些更好的优化技术或库。

以下是如何用纯 JS 实现这一点。您可以访问li元素与getElementsByTagName() https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName并使用slice() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/slice得到前 4 个。然后你可以将它们添加到ul通过从数组中弹出它们shift() https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift并将它们放在最后appendChild() https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

在这里工作 JSFiddle。 http://jsfiddle.net/e131qewx/3/

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()在上面的例子中。