JS将鼠标选中一个LI标签排在最前面

嬴政

在Discuz二次开发中，有这么一个分类需求，UL中有多个LI，并且LI中有<A>标签，当用户点击这个A标签中的某一个时，需要将这个点击的LI标签元素移到最前面。

1. <ul class="cl tbmu brand-list collapsed" style="max-height: 30px; overflow: hidden; transition: max-height 0.3s;">
   
2.                     <li class="a"><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;filter=sort&amp;comcategory=all" class="xi2" style="font-weight: 800;">不限</a></li>
   
3. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=5" class="xi2">知识_经验</a></li>
   
4. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=7" class="xi2">技术_讨论</a></li>
   
5. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=8" class="xi2">资料_电路图</a></li>
   
6. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=10" class="xi2">固件</a></li>
   
7. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=1" class="xi2">评测（详细）</a></li>
   
8. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=6" class="xi2">实测（简单)</a></li>
   
9. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=3" class="xi2">制作_改装</a></li>
   
10. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=2" class="xi2">维修</a></li>
    
11. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=4" class="xi2">校准_调试</a></li>
    
12. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=9" class="xi2">展示_拆机</a></li>
    
13. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=998" class="xi2">仪表周边</a></li>
    
14. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=1000" class="xi2">其它</a></li>
    
15. <li><a href="http://www.dt830.com/forum.php?mod=forumdisplay&amp;fid=37&amp;filter=sortid&amp;sortid=4&amp;searchsort=1&amp;comcategory=1001" class="xi2">求助</a></li>
    
16. </ul>

复制代码

下面的代码是查找和移动LI

1. document.addEventListener('DOMContentLoaded', function() {
   
2.     const brandLists = document.querySelectorAll('ul.brand-list');
   
3.    
   
4.     brandLists.forEach(list => {
   
5. 
   
6.                 //得到一个UL中所有的LI，并查找
   
7.                 var items_LI=list.getElementsByTagName("li");
   
8.                 var liparentNode, newLiFirst;
   
9.                 for (var i = 0; i < items_LI.length; i++)
   
10.                 {
    
11.                         if (items_LI[i].className === "a")
    
12.                         {
    
13.                                 if(i == 0) break;//选择的就是第一个，不需要处理
    
14.                                 
    
15.                                 liparentNode = items_LI[i].parentNode;
    
16.                                 newLiFirst = items_LI[i];
    
17.                                 liparentNode.removeChild(items_LI[i]);
    
18.                                 liparentNode.prepend(newLiFirst);
    
19.                                 break;
    
20.                         }
    
21.                 }
    
22.                 var items_a=list.getElementsByTagName("a")[0];
    
23.                 items_a.style.fontWeight = "800";
    
24.                 items_LI[0].className = "a";
    
25.     });
    
26. });
    
27. </script>

复制代码