1、一般做法

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>li的排序(call)</title>

<meta name="" content="" />

</head>

<body>

<ul id="ul1">

    <li>78</li>

    <li>92</li>

    <li>69</li>

    <li>54</li>

    <li>70</li>

    <li>48</li>

</ul>

<script type="text/javascript">

    var eles = document.getElementsByTagName("li");

    var oUl = document.getElementsByTagName("ul").item(0);

    (function(){

        var a = [];

        for(var i=0;i<eles.length;i++){

            a[i] = eles[i];

        }

        a.sort(function(li1,li2){

            var n = parseFloat(li1.innerHTML);

            var m = parseFloat(li2.innerHTML);

            return n-m;

        });

        for(var i=0;i<a.length;i++){

            oUl.appendChild(a[i]);

        }

    })();

</script>

</body>

</html>

2、利用call方法，让arguments转换成数组

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>li的排序(call)</title>

<meta name="" content="" />

</head>

<body>

<ul id="ul1">

    <li>78</li>

    <li>92</li>

    <li>69</li>

    <li>54</li>

    <li>70</li>

    <li>48</li>

</ul>

<script type="text/javascript">

    var eles = document.getElementsByTagName("li");

    var oUl = document.getElementsByTagName("ul").item(0);

    var a = [].slice.call(eles,0);

    a.sort(function(a,b){

        return a.innerHTML-b.innerHTML;

    })

    for(var i=0;i<a.length;i++){

        oUl.appendChild(a[i]);

    }

</script>

</body>

</html>

li排序的两种方法的更多相关文章

  1. 用Java集合中的Collections.sort方法对list排序的两种方法

    用Collections.sort方法对list排序有两种方法第一种是list中的对象实现Comparable接口,如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 ...

  2. 转：python list排序的两种方法及实例讲解

    对List进行排序,Python提供了两个方法 方法1.用List的内建函数list.sort进行排序 list.sort(func=None, key=None, reverse=False) Py ...

  3. python list排序的两种方法及实例讲解

    对List进行排序,Python提供了两个方法方法1 用List的内建函数list sort进行排序list sort(func=None, key=None, reverse=False)Pytho ...

  4. 实现对多维数组按照某个键值排序的两种方法(array_multisort和array_sort)

    实现对多维数组按照某个键值排序的两种解决方法(array_multisort和array_sort): 第一种:array_multisort()函数对多个数组或多维数组进行排序.    //对数组$ ...

  5. python-快速排序，两种方法→易理解

    快速排序(Quicksort)是对冒泡排序的一种改进. 快速排序由C. A. R. Hoare在1962年提出.它的基本思想是:通过一趟排序将要排序的数据分割成独立的两部分,其中一部分的所有数据都比另 ...

  6. 计算机二级-C语言-程序修改题-190116记录-对数组进行排序的两种方法。

    //函数fun的功能是:将n个无序整数从小到大排序. //冒泡排序法:小数往下浮,大数往上浮.把数都存到一个数组,然后两两比较,大数往后交换.双层递减循环. //第二种方法:都放入一个数组中,然后记录 ...

  7. Java中对List集合排序的两种方法

    第一种方法,就是list中对象实现Comparable接口,代码如下: public class Person implements Comparable<Person> { privat ...

  8. mysql数据库自增id重新从1排序的两种方法

    mysql默认自增ID是从1开始了,但当我们如果有插入表或使用delete删除id之后ID就会不会从1开始了哦.   使用mysql时,通常表中会有一个自增的id字段,但当我们想将表中的数据清空重新添 ...

  9. List集合序列排序的两种方法

    首先讲一下Comparable接口和Comparator接口,以及他们之间的差异.有助于Collections.sort()方法的使用.请参考 1.Comparable自然规则排序//在自定义类Stu ...

随机推荐

  1. ubuntu 下解决安装包依赖问题

    我们用banshee软件安装豆瓣插件来做个示例: 1.首先在Ubuntu Software Center内搜索banshee播放器 因为我之前已经安装好了,可以看到如下界面,你可以在点击该软件看到in ...

  2. 个人博客Week3

    必应软件客户端测评 话不多说 先来一张高大上的客户端界面截图! 首先 映入眼帘的就是四个主要的模块!(1)词典(2)例句(3)翻译(4)应用 (1)词典: 在查询词条的时候,一旦查询了一个词条就不能够 ...

  3. Bootstrap日期和时间表单组件运用兼容ie8

    准备动作先到下载Bootstrap日期和时间组件. 1:引入bootstrap.min.css,因为bootstrap-datetimepicker里面的很多样式依赖bootstarp的主样式,字体文 ...

  4. URLConnection 使用

    统一资源定位符URL(Uniform Resource Locator)是www客户机访问Internet时用来标识资源的名字和地址.超文本链路由统一资源定位符URL维持.URL的格式是: <M ...

  5. ubuntu_杂

    1. 虚拟机安装的 ubuntu 12.04,在关闭了 一段时间不操作就屏保 和 锁屏 之后, 在一段时间之后 虚拟机的屏幕还是变黑了,貌似是 os将 显示器关闭了. 这个相关的设置是在哪里? 相关设 ...

  6. JSP连接数据库的两种方式：Jdbc-Odbc桥和Jdbc直连（转）

    学JSP的同学都要知道怎么连数据库,网上的示例各有各的做法,弄得都不知道用谁的好.其实方法千变万化,本质上就两种:Jdbc-Odbc桥和Jdbc直连. 下面先以MySQL为例说说这两种方式各是怎么连的 ...

  7. Android网络编程系列 一 TCP/IP协议族之网际层

    这篇借鉴的文章主要是用于后续文章知识点的扩散,在此特作备份和扩散学习交流. 网际层包括:IP.ICMP.IGMP 以及处在网际层实际工作在链路层的 ARP 和 RARP等等协议. 1.IP协议 互联网 ...

  8. Eclipse NDK 配置

    一.关于NDK:NDK全称:Native Development Kit. 1.NDK是一系列工具的集合. NDK提供了一系列的工具,帮助开发者快速开发C(或C++)的动态库,并能自动将so和java ...

  9. Android版本升级同时Sqlite数据库的升级及之前数据的保留

    http://www.cnblogs.com/wang340/archive/2013/05/06/3063135.html http://www.eoeandroid.com/forum.php?m ...

  10. 高质量JavaScript代码书写基本要点

    翻译-高质量JavaScript代码书写基本要点 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/ ...