Question

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

因此，我想重新排序＆＃34;按钮＆＃34;这样第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>

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

1 个答案: