5

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

<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列表中的每一个？

我想在单击按钮时执行此操作 - 这是最简单的部分，它只是获得了反转列表的技术，这有点妨碍了我。

4

8 回答 8

16

HTMLCollection 只是节点的只读视图。为了操作节点，您必须使用各种 DOM 操作方法之一。就您而言，恰好有一条捷径；您需要做的就是以相反的顺序附加子节点。

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

编辑：发生的事情是appendChild在添加之前从文档中删除节点。这有两个效果：a）它使您不必制作节点列表的副本并在以相反顺序附加它们之前将它们删除，b）它会颠倒节点的顺序，因为它附加了最后一个孩子第一个和第一个子列表。

于 2012-09-21T23:30:40.970 回答
1

你可以这样做（在普通的 javascript 中）。您可以li以相反的顺序循环浏览标签并将它们附加到父级。这将产生颠倒它们的顺序的自然效果。你得到最后一个，将它附加到列表的末尾，得到第二个到最后一个，将它附加到列表中。获取第三个到最后一个，将其附加到列表的末尾，依此类推，所有项目最终都颠倒了。请注意，您可以在 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/

于 2012-09-21T23:30:40.687 回答
1 
var birds = document.getElementById('birds');

for(var i = 0, bll = birds.childNodes.length; i < bll; i++) {
  birds.insertBefore(birds.childNodes[i], birds.firstChild);
}
于 2012-09-21T23:33:28.060 回答
1 

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

于 2019-06-27T16:54:27.480 回答
0

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

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

于 2012-09-21T23:32:12.963 回答
0

未经测试，但尝试：

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

for(var i = birdList.length-1; i > 0; --i) {
    parent.appendChild(birdList[i];
}
于 2012-09-21T23:32:41.237 回答
0

实际上不需要 JavaScript。如果您在<ol>这里使用语义正确的（有序列表）元素（因为排序显然对您很重要），那么您可以使用该reversed属性来执行完全相同的操作，而无需任何脚本依赖！为了在视觉上颠倒项目的顺序，我们会在两行 CSS 中添加flex-direction：

ol[reversed] {
  display: flex;
  flex-direction: column-reverse;
}
<ol reversed>
  <li>Bald Eagle</li>
  <li>Falcon</li>
  <li>Condor</li>
  <li>Albatross</li>
  <li>Parrot</li>
</ol>

于 2018-06-22T09:59:45.203 回答
0

你也可以这样做。它的工作原理如下：

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

代码：

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

[].slice.call(birdList)
  .reverse()
  .forEach(bird => birdsContainer.appendChild(bird));
于 2020-12-03T21:09:24.110 回答