Question

我有一个无序列表，我已经用javascript颠倒了列表。我的脚本有效，但是列表重复。该页面将显示原始列表以及我的js正在执行的输出。如何使它仅渲染一次？我应该用jQuery重写并使用.detach（）吗？下面是我的代码：

var navList = $('ul.menu');
var navListItems = list.children('li');
navlist.append(navListItems.get().reverse());

Answer 1

只需在变量名中输入错字即可：）

var navList = $('ul.menu');
var navListItems = navList.children('li');
navList.append(navListItems.get().reverse());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="menu">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

Answer 2

您要将项目追加到已经有项目的列表中。建议您在存储了一系列项目后清除列表。然后，您可以再次开始附加每个项目。请参见下面的代码段。

var navMenu = document.getElementById("menu");
var navList = Array.from(navMenu.children);
navList.reverse().forEach( function(listItem){
  navMenu.append(listItem);
});

<div>
  <p>List</p>
  <ul id="menu">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
  </ul>
</div>

编辑：根据freedomn-m的注释，append函数将“移动”现有项目，而不是添加到列表中。删除了不必要的navMenu.innerHTML = "";行。

JS列表项的反向顺序无法正常工作

2 个答案: