js实现li排序

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>


猜你喜欢

转载自blog.csdn.net/Q_004/article/details/77430495