将前四项列表移到列表的末尾
将前四项列表移到列表的末尾
提问于 2015-08-25 17:42:50
所以我有一个包含几个<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个内存密集型列表中重用iOS元素。目标是显示前4个元素，其余4个被隐藏，容器一次显示4个项目。
在滚动(按钮点击)，我将动画列表和幻灯片在其他4，并在动画结束，移动前4个li项目接近列表的末尾(然后重新设置位置为left: 0为ul)
我的问题是如何获得第一个元素，并将它们添加到简单的javascript结尾。(我正在通过TweenLite处理动画)
的好处是：，如果您可以建议一些更好的优化技术或库来显示大量的元素。
回答 2
Stack Overflow用户
回答已采纳
发布于 2015-08-25 18:00:15
以下是如何在纯JS中实现的方法。您可以使用getElementsByTagName()访问getElementsByTagName()元素，并使用slice()获取前4。然后，您可以将它们添加到ul中，方法是使用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()。
Stack Overflow用户
发布于 2015-08-25 17:52:53
可以通过使用NodeList ()来迭代getElementsByTagName()，如下所示：
var list = document.getElementById("yourUlItem").getElementsByTagName("li");然后，您可以使用数组slice函数来捕获所需的所有子集，方法是保留正确的索引以捕获这些子集：
var firstFour = list.slice(0, 3);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/32210664
复制相关文章
相似问题
腾讯云开发者
