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