英文:
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:
<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);
}
答案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>
英文:
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 -->
<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>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论