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>