javascript - 使用 Javascript 或 JQuery 对 HTML 列表重新排序

Question

我正在寻求帮助，看看是否可以对导航栏中的项目重新排序。该栏本身是由 CMS 中的一个模块创建的，该模块被锁定为编辑。

因此，我想重新排序“按钮”，以便第四个选项将移至菜单栏中的第一个选项。

锁定的模块创建以下 HTML:

<div class="navigation-primary">
    <ul>
        <li><a href="/1" class="nav-link">AAA</a></li>
        <li><a href="/2" class="nav-link">BBB</a></li>
        <li><a href="/3" class="nav-link">CCC</a></li>
        <li><a href="/4" class="nav-link trigger">DDD</a></li>
        </ul>
</div>

我可以用 Javascript 或 jQuery 来完成这个任务吗？

Answer 1

使用 document.querySelectorAll() 获取列表项以及对 ul 的引用。然后将最后一个列表项添加到 ul 前面:

var listItems =  document.querySelectorAll('.navigation-primary li');

document.querySelector('.navigation-primary > ul').prepend(listItems[listItems.length - 1]);

<div class="navigation-primary">
    <ul>
        <li><a href="/1" class="nav-link">AAA</a></li>
        <li><a href="/2" class="nav-link">BBB</a></li>
        <li><a href="/3" class="nav-link">CCC</a></li>
        <li><a href="/4" class="nav-link trigger">DDD</a></li>
  </ul>
</div>