JavascriptまたはJQueryを使用したHTMLリストの並べ替え

Question

ナビゲーションバーの項目を並べ替えることができるかどうか確認しています。バー自体は、編集中にロックされたCMS内のモジュールによって作成されます。

このように、「ボタン」を並べ替えると、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>