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>
时间： 2024-08-12 18:24:09