使用Javascript或JQuery重新排列HTML列表

我正在尋求幫助，看看是否可以重新排序導航欄中的項目。欄本身由被鎖定爲編輯的CMS內的模塊創建。使用Javascript或JQuery重新排列HTML列表

因此，我想重新排序「按鈕」，以便第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的？

來源

2016-12-01 Jason Schaeffer

「*我能做到這一點的JavaScript或jQuery的*？」 - 是的。是的，你可以。但是你在哪裏試圖自己實現這個呢？ –

獲取最後的li並將其前置到ul –

使用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>

來源

2016-12-01 18:56:13

謝謝......您好心地幫助了一位對javascript和CSS相對無法理解的HTML和CSS設計師。 –

你的歡迎:) –

使用Javascript或JQuery重新排列HTML列表

回答

相關問題