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

Question

我正在寻求帮助，以查看是否可以对导航栏中的项目进行重新排序。 条形图本身是由CMS中锁定编辑的模块创建的。

因此，我想对“按钮”进行重新排序，以使第4个选项在菜单栏中变为第1个。

锁定的模块将创建以下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>