<!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>

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

  1. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. JS 写<ul><li>

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Jquery和JS获取ul中li标签（转）

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  4. Jquery和JS获取ul中li标签

    js 获取元素下面所有的li var content=document.getElementById("content"); var items=content.getElemen ...

  5. 竖向折叠二级导航JS代码（可防刷新ul/li结构）

    <html xmlns="http://www.w3.org/1999/xhtml"><head runat="server">    ...

  6. ul li a active jquery.cookie.js

    div class="righter nav-navicon" id="admin-nav"> <div class="mainer&qu ...

  7. css案例学习之div ul li a 实现导航效果

    效果 代码 <html> <head> <title>无需表格的菜单</title> <style> body{ background-co ...

  8. JS和jQuery中ul li遍历获取对应的下角标

    首先先看代码: html代码部分: <div id="div"> <ul> <li>1111111</li> <li>2 ...

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

    边框重合这个效果并不难,只是我们没有真正的动手做过而已,下面让我们来谈谈用ul li如何实现边框重合,并附带鼠标经过效果 <!DOCTYPE html> <html lang=&qu ...

随机推荐

  1. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

  2. [转载]Java中的String，StringBuilder，StringBuffer三者的区别

    最近在学习Java的时候,遇到了这样一个问题,就是String,StringBuilder以及StringBuffer这三个类之间有什么区别呢,自己从网上搜索了一些资料,有所了解了之后在这里整理一下, ...

  3. sudo: apt-get: command not found

    apt-get是debian(Ubuntu)才有的包管理器,而在Apple 的OS X系统中是没有的. brew(全称Homebrew)是Mac OSX上的软件包管理工具,能在Mac中方便的安装软件或 ...

  4. 安装mysql警告 warning: mysql-community-server-5.7.19-1.el6.x86_64.rpm: Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY

    摘自:https://www.cnblogs.com/royfans/p/7243641.html 红帽安装rpm安装MySQL时爆出警告: 警告:MySQL-server-5.5.46-1.linu ...

  5. Redis Windows 安装

    摘自:https://www.cnblogs.com/M-LittleBird/p/5902850.html 一.下载windows版本的Redis 去官网找了很久,发现原来在官网上可以下载的wind ...

  6. HashMap和LinkedHashMap区别

    import java.util.HashMap; import java.util.Iterator; import java.util.LinkedHashMap; import java.uti ...

  7. STM32硬件IIC驱动设计（转）

    源: STM32硬件IIC驱动设计 参考: STM32—硬件IIC主机通信 STM32’s I2C 硬件BUG引发的血案(qzm) 解决STM32 I2C接口死锁在BUSY状态的方法讨论

  8. 注册页面的JSON响应方式详细分析（与前端页面交互方式之一）

    控制器层 需求分析: 访问路径:`/user/reg.do` //自己根据功能需求设定的请求参数:`username=xx&password=xx&&phone=xx& ...

  9. pagehelper调用mybatis报错java.lang.NoSuchMethodError:org.apache.ibatis.reflection.MetaObject.forObject

    最近在升新的基础框架到spring cloud,启动时pagehelper报错,如下: java.lang.NoSuchMethodError:org.apache.ibatis.reflection ...

  10. 解决*.props打开失败问题

    由于不同机器的绝对地址不一样,可能会出现解决*.props打开失败问题,解决方向如下: 1.找到这里缺失的.props文件,复制到固定路径下: 2.强行打开代码,这个时候是报错的 3.选择编辑 4.将 ...