js实现li排序

来源：互联网发布：数据网络开关在那编辑：程序博客网时间：2024/06/05 22:37

js实现对li的排序

实质上是实现对数组的排序，先获取li数组，在定义一个真正的arr数组，遍历li数组，把li的每一个元素赋给arr（因为li不是真正意义上的数组，不能直接使用sort方法，用arr替换li，就可以用sort方法了）。然后使用sort方法排序，排序之后要注意用appendChild方法写入，不然你只排序，不写入，那排序就瞎排了。

前提是li数组是数字开头的。

代码如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>li排序</title><script type="text/javascript">window.onload=function(){var oUl1=document.getElementById('ul1')var oBtn=document.getElementById('btn1');oBtn.onclick=function(){var aLi=oUl1.getElementsByTagName('li');var arr=[];for(var i=0;i<aLi.length;i++)  //把li用数组表示{arr[i]=aLi[i];}arr.sort(function(li1,li2){var n1=parseInt(li1.innerHTML);var n2=parseInt(li2.innerHTML);return n1-n2;  //升序排列})for(var i=0;i<arr.length;i++){oUl1.appendChild(arr[i]);   //排序之后再写入}}}</script></head><body>  <ul id="ul1">  <li>89</li>  <li>3</li>  <li>45</li>  <li>23</li>  <li>452</li>  <li>25</li>  </ul>  <input type="button" id="btn1" value="排序" /></body></html>

阅读全文

0 0