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的1000内存密集型列表中重用li个元素。目标是显示前4个元素，其余4个被隐藏，容器一次显示4个项目。

在滚动（按钮点按）上，我将为列表设置动画并在其他4中滑动，在动画结束时，将前4个li项目移动到结尾处。列表（然后将位置重置为left: 0的{{1}}）

我的问题是我如何能够获得第一个元素，并在普通的javascript中将它们添加到最后。（我通过TweenLite处理动画）

加分：如果您可以在显示众多元素时建议更好的优化技术或库。

Answer 1

您可以使用getElementsByTagName（）来获取NodeList以进行迭代，如下所示：

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

然后，您可以使用Array slice函数来捕获所需的所有子集，方法是保留正确的索引以捕获集合：

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

Answer 2

以下是如何在纯JS中完成的。您可以使用getElementsByTagName()访问li元素并使用slice()获取第一个4.然后您可以通过ul将它们添加到数组中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; 3}}并使用shift()

将它们放在最后

appendChild()

insertBefore()

编辑：要在开头添加元素，请使用appendChild()代替pop()。在上面的示例中，您还使用shift()代替IncludeDirectory。

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

2 个答案: