码迷,mamicode.com
首页 > 编程语言 > 详细

07-JS中 li 排序

时间:2017-11-09 20:46:17      阅读:217      评论:0      收藏:0      [点我收藏+]

标签:数组   turn   nload   btn   function   .so   比较   tag   []   

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 排序

标签:数组   turn   nload   btn   function   .so   比较   tag   []   

原文地址:http://www.cnblogs.com/liuxuanhang/p/7811095.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!