07-JS中 li 排序

Posted 刘选航

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了07-JS中 li 排序相关的知识,希望对你有一定的参考价值。

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>

 

以上是关于07-JS中 li 排序的主要内容,如果未能解决你的问题,请参考以下文章

sql [SQL查询片段]用于在命令行或通过R和其他工具使用SQL的快速代码段#tags:sql,R,text processing,命令li

如何在UL中迭代使用appendChild和片段LI?

学斋随笔,初九潜龙勿用,-07js方法,排序查找

Emmet (前身为 Zen Coding)

等长排序数组的中位数

事件中的this