当前位置：首页 > news >正文

07-JS中 li 排序

news 来源：原创 2024/5/14 3:29:54

JS中 li 排序

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title></title>
 6         <style type="text/css">
 7             #ul1{background: green;}
 8         </style>
 9     </head>
10     <body>
11         <input type="button" name="" id="btn1" value="排序" />
12         
13         <ul id="ul1">
14             <li>11</li>
15             <li>332</li>
16             <li>10</li>
17             <li>40</li>
18             <li>80</li>
19         </ul>
20         
21     </body>
22     <script type="text/javascript">
23         window.onload = function(){
24             var oUl1 = document.getElementById("ul1");
25             var oBtn = document.getElementById("btn1");
26             
27             oBtn.onclick = function(){
28                 var allLi = oUl1.getElementsByTagName("li");
29                                 
30                 //allLi.sort();
31                 //报错：因为 allLi它并不是一个真正的数组 ，它只是以数组的形式组织数据，没有sort方法
32                 
33                 //将 allLi里所有的元素导到一个数组中，之后  sort
34                 var arr = [];
35                 for(var i=0;i<allLi.length;i++){
36                     arr[i] = allLi[i];
37                 }
38                 
39                 //调用 sort
40                 arr.sort(function(li1,li2){
41                     //要把  li 中的数字取出，进行比较
42                     var n1 = parseInt( li1.innerHTML);
43                     var n2 = parseInt( li2.innerHTML);
44                     return n1-n2;
45                 });
46                 
47                 //将已经排好序的数组重新添加到 ul
48                 for(var i=0;i<arr.length;i++){
49                     oUl1.appendChild(arr[i]);
50                 }
51             }
52             
53             
54         }
55     </script>
56     
57 </html>