如何按指定顺序（Link1-Link2-Link3）显示下拉菜单链接？

当前admin角色下，下拉菜单链接顺序为Link1、Link3、Link2，要改为Link1、Link2、Link3的顺序，可通过以下几种方式实现：

方法1：用insertBefore替换append定位插入 #

放弃使用append（会将元素添加到容器末尾），改用insertBefore将Link2插入到Link3对应的列表项之前：

if (role == "admin") {
  const link2Element = $('<li><a class="dropdown-item" href="#">Link 2</a></li>');
  link2Element.insertBefore('.dropdown-menu li:contains("Link 3")');
}

li:contains("Link 3")用于定位显示Link3的列表项，确保Link2插入到它的前面。

方法2：给Link3列表项加标识，精准定位 #

为避免文本匹配可能出现的问题，先给HTML中的Link3列表项添加专属类名：

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li class="link3-item"><a class="dropdown-item" href="#">Link 3</a></li>
</ul>

再在JS中通过类名精准定位插入位置：

if (role == "admin") {
  const link2Element = $('<li><a class="dropdown-item" href="#">Link 2</a></li>');
  link2Element.insertBefore('.link3-item');
}

方法3：提前预留位置，控制显示隐藏 #

如果下拉菜单结构固定，可直接在HTML中提前写好Link2的列表项，默认隐藏，admin角色时再显示：

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li class="link2-item d-none"><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
</ul>

这里用Bootstrap的d-none类默认隐藏元素，JS中只需移除该类即可：

if (role == "admin") {
  $('.link2-item').removeClass('d-none');
}

内容的提问来源于stack exchange，提问作者User