<!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. tensorflow学习6

    g_w1 = tf.get_variable('g_w1', [z_dim, 3136], dtype=tf.float32, initializer=tf.truncated_normal_init ...

  2. CRM 权限设置

    表结构的设计 权限表 url -url地址的正则表达式 ^$ title - 标题 角色表 name - 角色名称 permissions 多对多关联权限表 (权限和角色的关系表) 用户表 name ...

  3. 听 Fabien Potencier 谈Symfony2 之 《What is Dependency Injection ？》

    听 Fabien Potencier 谈Symfony2 之 <What is Dependency Injection ?>   什么是依赖注入?从PHP实现角度来分析依赖注入,因为PH ...

  4. Porsche Piwis Tester 2 Online Coding Guide

    Porsche Piwis online programming account service is piwis porsche subscription and piwis tester 2 on ...

  5. 监控网卡流量脚本（Python）

    #!/usr/bin/env python# coding: utf-8# author: Xiao Guaishou try:    import psutilexcept ImportError: ...

  6. Google翻译实现

    https://blog.csdn.net/yingshukun/article/details/53470424 Google翻译实现

  7. socket：10038错误

    转自:http://blog.csdn.net/chen495810242/article/details/42029825 winSock的一个bug:当closesocket多次错误使用时会导致问 ...

  8. cscope for golang

    从 https://gist.github.com/bopjiang/11146574 下载, 做了修改. cscope-go.sh #!/bin/bash # generate cscope ind ...

  9. VC++ 获取Windows系统版本号、CPU名称

    转载:https://blog.csdn.net/sunflover454/article/details/51525179 转载:https://blog.csdn.net/magictong/ar ...

  10. Logger级别和输出的地方

    转载自http://blog.csdn.net/u014756827/article/details/52475990 log4j日志配置 关键字: apache log4j 1.配置根Logger: ...