當(dāng)前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JS实现ul,li排序效果
生活随笔
收集整理的這篇文章主要介紹了
JS实现ul,li排序效果
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE html>
<html>
<head><title>js列表排序</title><meta charset="utf-8">
</head>
<style type="text/css"></style>
<script type="text/javascript">window.onload=function(){var oUl=document.getElementById('ul1');var oBtn=document.getElementById('btn1');oBtn.onclick=function(){var aLi=document.getElementsByTagName('li');var arr=[];for(var i=0;i<aLi.length;i++){arr[i]=aLi[i]; }arr.sort(function(li1,li2){var n1=parseInt(li1.innerHTML);var n2=parseInt(li2.innerHTML);return n1-n2;});for(var i=0;i<arr.length;i++){oUl.appendChild(arr[i]);}}}
</script><body> <input type="button" id="btn1" value="排序" /><hr /><ul id="ul1"><li>32</li><li>25</li><li>3</li><li>18</li></body>
</html>
?
轉(zhuǎn)載于:https://www.cnblogs.com/kangshuai/p/7153627.html
總結(jié)
以上是生活随笔為你收集整理的JS实现ul,li排序效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MySQL的简单使用-(一)
- 下一篇： phalcon安装-遇坑php-conf