如何更改列表项的顺序

huangapple go评论69阅读模式
英文:

How to change order of list items

问题

实际顺序

Nav01
Nav02
Nav03
Nav04
Nav05
mynav

期望的导航顺序

mynav
Nav01
Nav02
Nav03
Nav04
Nav05

我得到的顺序

Nav02
Nav03
Nav04
Nav05
Nav01
mynav

HTML:

<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);    
}
英文:

Here I have a navigation items in a list which are in the specified order. I'm using JavaScript to change the order based on the condition. But I'm unable to get the order I'm trying to achieve.

actual order

Nav01
Nav02
Nav03
Nav04
Nav05
mynav

expected nav order

mynav
Nav01
Nav02
Nav03
Nav04
Nav05

What i'm getting

Nav02
Nav03
Nav04
Nav05
Nav01
mynav

html:

&lt;ul&gt;
    &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase&quot;&gt;Nav01&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase&quot;&gt;Nav02&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase&quot;&gt;Nav03&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase&quot;&gt;Nav04&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase&quot;&gt;Nav05&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href=&quot;&quot; class=&quot;nav-menu__item-link nav-menu__item-link--level-1 d-block d-lg-inline-block text-uppercase&quot;&gt;mynav&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;

JS:

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

答案1

得分: 1

.before(content) 是用于在一组元素中的指定位置(在你的情况下是 firstMenuItem 参数指定的位置)插入内容的方法,将其插入在你调用方法的元素之前(在你的情况下是 mynav)。

所以,如果你想使用 .before,你需要交换上下文和参数,像这样:

firstMenuItem.before(mynav)

请注意,如果你的目的是将 mynav 移动到列表的开头,最好明确这样做,以防止列表中的项目改变它们的默认位置。这可以通过使用 mynav.prependTo(target) 方法来实现,其中 target 是你的列表。

英文:

.before(content) inserts content that is specified by parameter (in your case it is firstMenuItem) and inserts it before elements in a set you are calling method for (in your case it is mynav).

So, if you want to use .before, you need to swap context and parameter like this:

firstMenuItem.before(mynav)

Please note, that if your intention is to move mynav to start of the list, it is better to specifically do so, in case items in your list would change their default positions. It can be achieved with mynav.prependTo(target) method, where target is your list.

答案2

得分: 1

使用CSS。只需改变最后一个元素的位置到第一个元素而无需使用JavaScript。给父元素分配一个类,并使用CSS的flex和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>

flex项目排序(MDN)

英文:

Use CSS.
There's no need to use JavaScript in order to just change the position of a last element - to first.
Assign the parent a class and use CSS flex and order

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

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

<!-- language: lang-html -->

&lt;ul class=&quot;nav-list&quot;&gt;
  &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Nav01&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Nav02&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Nav03&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Nav04&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;Nav05&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;#!&quot;&gt;mynav&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

<!-- end snippet -->

Ordering flex items (MDN)

huangapple
  • 本文由 发表于 2023年6月15日 21:45:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76483140.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定