gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 00:23:47 24 4
gpt4 key购买 nike

所以我有一个包含多个 <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>

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

在滚动(点击按钮)时,我将为列表设置动画并在其他 4 个中滑动,在动画结束时,移动前 4 个 li列表末尾的项目(然后将 left: 0 的位置重置为 ul )

我的问题是如何获取第一个元素并将它们添加到纯 javascript 的末尾。 (我正在通过 TweenLite 处理动画)

奖励:如果您可以在显示大量元素时提出一些更好的优化技术或库。

最佳答案

这里是你如何在纯 JS 中做到这一点。您可以使用 getElementsByTagName() 访问 li 元素并使用 slice()获得前 4 个。然后您可以通过使用 shift() 从数组中弹出它们来将它们添加到 ul并用 appendChild() 把它们放在最后

Working JSFiddle here.

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()

关于javascript - 将前四个列表项移动到列表末尾,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32210664/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com