jquery 如何更改列表项的顺序

p1iqtdky 于 2023-06-22 发布在 jQuery

关注(0)|答案(2)|浏览(148)

在这里我有一个导航项目在一个列表中，这是在指定的顺序。我使用JavaScript根据条件更改顺序。但我无法得到我想要的订单。
实际订单

Nav01
Nav02
Nav03
Nav04
Nav05
mynav

预期导航顺序

mynav
Nav01
Nav02
Nav03
Nav04
Nav05

我得到的

Nav02
Nav03
Nav04
Nav05
Nav01
mynav

联系我们

<ul>
    <li><a href="" class="nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase">Nav01</a></li>
    <li><a href="" class="nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase">Nav02</a></li>
    <li><a href="" class="nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase">Nav03</a></li>
    <li><a href="" class="nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase">Nav04</a></li>
    <li><a href="" class="nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase">Nav05</a></li>
    <li><a href="" class="nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase">mynav</a></li>
  </ul>

JS：

var country = "NZ"
  
  if(country === 'NZ'){
    var firstMenuItem = $('a.nav-menu__item-link.nav-menu__item-link--level-1:contains("Nav01")').parent();
    var mynav = $('a.nav-menu__item-link.nav-menu__item-link--level-1:contains("mynav")').parent();
    mynav.before(firstMenuItem);    
  }

jquery

来源：https://stackoverflow.com/questions/76483140/how-to-change-order-of-list-items

2条答案

按热度按时间

yfwxisqw1#

.before(content)插入由参数指定的内容（在本例中为firstMenuItem），并将其插入到要为其调用方法的集合中的元素之前（在本例中为mynav）。
所以，如果你想使用.before，你需要像这样交换上下文和参数：

firstMenuItem.before(mynav)

请注意，如果您的目的是将mynav移动到列表的开头，最好专门这样做，以防列表中的项目更改其默认位置。它可以用mynav.prependTo(target)方法实现，其中target是您的列表。

赞(0）回复(0）举报 2023-06-22

r3i60tvu2#

使用CSS。
没有必要使用JavaScript来 * 只是 * 改变最后一个元素的位置-到第一个。为父类分配一个类并使用CSS flex and order

.nav-list {
  display: flex;
  flex-direction: column;
}
.nav-list li:last-child {
  order: -1;
}

<ul class="nav-list">
  <li><a href="#!">Nav01</a></li>
  <li><a href="#!">Nav02</a></li>
  <li><a href="#!">Nav03</a></li>
  <li><a href="#!">Nav04</a></li>
  <li><a href="#!">Nav05</a></li>
  <li><a href="#!">mynav</a></li>
</ul>

订购弹性项目（MDN）

赞(0）回复(0）举报 2023-06-22

我来回答

jquery 如何更改列表项的顺序

2条答案

相关问题

热门标签

最新问答