<!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. java获取前一天时间SimpleDateFormat，java判断某个时间段

    java获取前一天时间SimpleDateFormat SimpleDateFormat predf = new SimpleDateFormat("yyyy-MM-dd"); D ...

  2. read 命令详解

    read 命令从标准输入中读取一行,并把输入行的每个字段的值指定给 shell 变量 语法选项 -p read –p “提示语句”,则屏幕就会输出提示语句,等待输入,并将输入存储在REPLY中 -n ...

  3. 怎样从外网访问内网WampServer？

    本地安装了一个WampServer,只能在局域网内访问,怎样从外网也能访问到本地的WampServer呢?本文将介绍具体的实现步骤. 准备工作 安装并启动WampServer 默认安装的WampSer ...

  4. 数据分析之pandas01

    Series 一.Series Series是一种类似于一维数组的对象,有两部分组成:     .values:一组数据(ndarray类型)     .index: 相关的数据索引标签 二.seri ...

  5. MyEclipse 10.7（版本：eclipse 3.7.x-Indigo系列）安装activiti-eclipse-plugin插件（流程设计器）

    基本信息 1.本机MyEclipse 10.7菜单[Help->About MyEclipse Enterprise Workbench]的版本信息: MyEclipse Enterprise ...

  6. org.springframework.jdbc.UncategorizedSQLException

    org.springframework.jdbc.UncategorizedSQLException: StatementCallback; uncategorized SQLException fo ...

  7. Eclipse启动参数设置

    Eclipse启动参数设置 文件路径:安装目录根路径/eclipse.ini 参数注解: [-debug options -vm javaw.exe] 显示JVM当前内存使用量(注:详见下方<让 ...

  8. 从技术专家到管理者的思路转变（V1）

    作为技术专家出身的管理者,是一种优势(你所做的很多决策可能比非技术出身的管理者更加具有可行性和性价比).也是一种劣势(你可能会过于自恋自己的技术优势).这取决于你在接下去的职业生涯中,如何取舍你的技术 ...

  9. Net中应用 Redis 扩展类

    GIt地址:https://gitee.com/loogn/stackexchange-redis-typedextensions 1.stackexchange 类调用 using System; ...

  10. Codeforces Round #439 (Div. 2) Problem C (Codeforces 869C) - 组合数学

    — This is not playing but duty as allies of justice, Nii-chan! — Not allies but justice itself, Onii ...