JS实现ul,li排序效果

<!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>
时间: 2024-11-05 17:31:59

JS实现ul,li排序效果的相关文章

no-jQuery 列表&lt;li&gt;排序插件 -- Sortable.js

项目里用到这个列表排序插件,比较好用,不依赖jQuery,另源码也有很多可借鉴的地方,故推荐给大家试试. 官方网站: http://rubaxa.github.io/Sortable/ Sortable Features Support touch devices and modern browsers Built using native HTML5 drag and drop API Simple API Lightweight, 2KB gzipped No jQuery Usage <u

Jquery和JS获取ul中li标签

js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElementsByTagName("ul"); var itemss=items[2].getElementsByTagName("li");//获取第二个li标签 或 var div=document.getElementById('a'); var ul=div.childN

竖向折叠二级导航JS代码(可防刷新ul/li结构)

<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    <title></title>      <style type="text/css">         *{margin:0;padding:0;border:0;}        body         {         font-family:

用ul li实现边框重合并附带鼠标经过效果

边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 4 <head> 5 <title></title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12

利用js输出ul下li的index索引值

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>打印索引</title> </head> <style type="text/css"> li{background: pink;margin-bottom: 10px;height: 40px;} </style> <body>

ul li a active jquery.cookie.js

div class="righter nav-navicon" id="admin-nav"> <div class="mainer"> <div class="admin-navbar"> <span class="float-right"> <a class="button button-little bg-main" href=&qu

基于js鼠标拖动图片排序

分享一款基于js的图片排序效果.鼠标拖动图片,重新排列图片的排列顺序.该插件适用浏览器:IE8.360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗.效果图如下: 在线预览   源码下载 实现的代码. html代码: <ul id="ul1"> <li> <img src="images/1.jpg" width="200" height="150" />&l

js实现轮播图效果(附源码)--原生js的应用

1.js实现轮播图效果 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="Author" content="奇客艺术"> <meta name="keyword" content="关键字"> <meta name=

jS事件之网站常用效果汇总

下拉菜单 <!--简单的设置了样式,方便起见,将style和script写到同一个文档,着重练习事件基础--> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } ul { list-style: none; } body{ margin: