Question

假设我有一个无序列表，如下所示：

<ul id="birds">
  <li>Bald Eagle</li>
  <li>Falcon</li>
  <li>Condor</li>
  <li>Albatross</li>
  <li>Parrot</li>
</ul>

使用纯JavaScript（不包括jQuery），我希望能够反转此列表的顺序 - 以便它匹配以下预期的“输出”：

<ul id="birds">
  <li>Parrot</li>
  <li>Albatross</li>
  <li>Condor</li>
  <li>Falcon</li>
  <li>Bald Eagle</li>
</ul>

这是我试图编写的JavaScript，试图实现这个目标：

var birdList = document.getElementById("birds").getElementsByTagName("li");
var birdListReverse = birdList.reverse();

for(var i = 0; i < birdList.length; i++)
{
  birdList[i] = birdListReverse[i];
}

我认为以某种方式用“反转”列表中的那些覆盖当前列表项是足够的，但不是。我是否必须以某种方式操纵列表中的每个nodeValue？

我想在单击按钮时执行此操作 - 这是一个简单的部分，它只是让技术反转阻碍我一点的列表。

Answer 1

HTMLCollection只是节点的只读视图。为了操作节点，您必须使用各种DOM操作方法之一。在你的情况下，碰巧有一个捷径;您所需要做的就是以相反的顺序附加子节点。

var birds = document.getElementById("birds");
var i = birds.childNodes.length;
while (i--)
  birds.appendChild(birds.childNodes[i]);

修改：正在发生的事情是appendChild在添加节点之前从文档中删除该节点。这有两个影响：a）它使您不必复制节点列表并在以相反的顺序附加节点之前将其删除，并且b）它会随着节点的顺序反转节点的顺序，因为它会附加最后一个节点第一个和第一个孩子名单。

Answer 2

你可以这样做（在普通的javascript中）。您可以按相反的顺序循环遍历li标记，并将它们附加到父标记。这将具有扭转其秩序的自然效果。你得到最后一个，将它附加到列表的末尾，得到第二个到最后一个，将它附加到列表中。获取第3个到最后一个，将其附加到列表的末尾，依此类推，所有项目最终都会反转。注意，你可以在DOM中已经存在的东西上使用appendChild，它会自动从它的当前位置移动（例如在追加之前删除）。

var birds = document.getElementById("birds");
var birdList = birds.getElementsByTagName("li");
for (var i = birdList.length - 1; i >= 0; i--) {
    birds.appendChild(birdList[i]);
}

工作示例：http://jsfiddle.net/jfriend00/GLvxV/

Answer 3

var birds = document.getElementById('birds');

for(var i = 0, bll = birds.childNodes.length; i < bll; i++) {
  birds.insertBefore(birds.childNodes[i], birds.firstChild);
}

Answer 4

操纵birdList不会重新排序元素，因为birdList只是一个集合 - NodeList - 它独立于DOM本身。

您实际上需要获得对<ul id="birds">元素的引用，然后使用removeChild(...)和appendChild(...)的组合 - 也许insertBefore()。

Answer 5

未经测试，但请尝试：

var parent = document.getElementById("birds");
var birdList = parent.getElementsByTagName("li");

for(var i = birdList.length-1; i > 0; --i) {
    parent.appendChild(birdList[i];
}

Answer 6

实际上不需要JavaScript。如果您要在这里使用语义正确的<ol>（有序列表）元素（因为排序显然对您很重要），那么您可以使用reversed属性执行完全相同的操作而无需任何脚本-依赖！

<ol reversed>
  <li>Bald Eagle</li>
  <li>Falcon</li>
  <li>Condor</li>
  <li>Albatross</li>
  <li>Parrot</li>
</ol>

Answer 7

const list = document.querySelector("ul");
Array.from(list.children).reverse().forEach(element =>list.appendChild(element));

Answer 8

您也可以这样做。其工作原理如下：

抓取所有鸟列表项（<li>元素）并将它们作为NodeList返回
将NodeList转换为数组并反转数组（因为可以反转数组中的项，但不能反转NodeLists中的项）
将数组中的每个鸟列表项追加到原始列表容器（<ul>元素）中

代码：

const birdsContainer = document.getElementById("birds");
const birdList = birds.getElementsByTagName("li");

[].slice.call(birdList)
  .reverse()
  .forEach(bird => birdsContainer.appendChild(bird));

如何反转无序列表中列表项的顺序

8 个答案: