要点：

  • getElementsByTagName("li")返回的是HTMLCollection对象，这个对象不同于Array对象，不能使用sort()方法进行排序~
  • 下面方法的要点是借壳Array对象，同时使用了appendChild的特性~
 <!DOCTYPE html>

 <html>

 <head lang="en">

     <meta charset="UTF-8">

     <title></title>

     <script>

         window.onload = function () {

             var ul = document.getElementById("ul1");

             var btn = document.getElementById("btn1");

             var aLi = ul.getElementsByTagName("li");

             btn.onclick = function () {

                 var arr = [];           // 1. 创建一个Array对象

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

                     arr[i] = aLi[i];    // 2. 借壳Array对象

                 }

                                         // 3. 排序

                 arr.sort(function (li1, li2) {

                     return parseInt(li1.innerHTML) < parseInt(li2.innerHTML);

                 });

                                         // 4. 利用appendChild的特性

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

                     ul.appendChild(arr[i]);

                 }

             }

         }

     </script>

 </head>

 <body>

     <input type="button" id="btn1" value="sort" />

     <ul id="ul1">

         <li>34</li>

         <li>25</li>

         <li>9</li>

         <li>88</li>

         <li>54</li>

     </ul>

 </body>

 </html>

<li>元素的排序的更多相关文章

  1. JQuery利用sort对DOM元素进行排序

    前言 排序对于我们是再熟悉不过了,在绝大数应用程序中都会有这样一个场景:当我们从服务器端获取一个列表时,在界面上进行渲染,我们可以会依赖于某一个规则来进行排序,当然此时绝大多数会再次与服务器进行交互来 ...

  2. 在li元素中放入img图片时li的高度问题

    在li元素中放入img图片时li的高度会比img图片的高度多出几个像素,解决这个问题只需要将img元素的css设置成vertical-align: middle;就可以解决.

  3. sort() 方法用于对数组的元素进行排序

    语法 arrayObject.sort(sortby) 参数 描述 sortby 可选.规定排序顺序.必须是函数. 返回值 对数组的引用.请注意,数组在原数组上进行排序,不生成副本. 说明 如果调用该 ...

  4. 对数组元素进行排序的方法总结（利用C++）

    首先,对数组元素进行排序方法总结为以下两类: 一.简单排序算法(时间复杂度O(n*n)) 1.插入排序 2.选择排序 3.交换排序,即冒泡排序 二.先进排序算法(时间复杂度O(n*logn)) 1.快 ...

  5. jQuery.sort对DOM元素进行排序

    实例: 每个tr的第三列显示的都是数字,我们就以这数字列作为排序依据,方法就是利用jquery的sort()方法. 首先,利用jquery选择器获取每个tr元素,获取回来是一个数据: var $trs ...

  6. 使用DOM的方法获取所有li元素，然后使用jQuery()构造函数把它封装为jQuery对象

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

  7. 使用jQuery匹配文档中所有的li元素，返回一个jQuery对象，然后通过数组下标的方式读取jQuery集合中第1个DOM元素，此时返回的是DOM对象，然后调用DOM属性innerHTML,读取该元素 包含的文本信息

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

  8. [ActionScript 3.0] 对数组中的元素进行排序Array.sort()的方法

    对数组中的元素进行排序. 此方法按 Unicode 值排序. (ASCII 是 Unicode 的一个子集.) 默认情况下,Array.sort()按以下方式进行排序: 1. 排序区分大小写(Z优先于 ...

  9. JavaScript 操作选中当前的li元素并给他添加select类

    JavaScript 操作选中当前的li元素并给他添加select类.之前都是使用jquery写的,今天使用JavaScript写一个. <!DOCTYPE html> <html ...

随机推荐

  1. php正则表达式验证手机/固定电话/邮箱/身份证/银行卡自定义函数

    /** * 验证手机号码格式 * @param string $phone 手机号 * @return boolean */ function is_phone($phone) { $chars = ...

  2. 布隆算法（BloomFilter）

          BloomFilter算法,是一种大数据排重算法.在一个数据量很大的集合里,能准确断定一个对象不在集合里:判断一个对象有可能在集合里,而且占用的空间不大.它不适合那种要求准确率很高的情况, ...

  3. Linux常用命令之info、cal、echo命令

    info命令,是Linux下info格式的帮助指令 执行man info可以查看info命令的 语法 info(选项)(参数) 选项 -d:添加包含info格式帮助文档的目录: -f:指定要读取的in ...

  4. MySQL 关于视图的操作

    -- 视图就是一条select 语句 执行后返回结果集,是一种虚拟表,是一个逻辑表 -- 方便操作,减少复杂的SQL语句,增加可读性,更加安全一些 create view demo_view as s ...

  5. vue项目搭建和开发流程 vue项目配置ElementUI、jQuery和Bootstrap环境

    目录 一.VUE项目的搭建 1. 环境搭建 2. 项目的创建和启动 二. 开发项目 1. 配置vue项目启动功能 2. 开发vue项目 (1)项目文件的作用 (2)vue项目开发流程 (3)vue项目 ...

  6. hdu 6078 Wavel Sequence

    题 OvO http://acm.hdu.edu.cn/showproblem.php?pid=6078 (2017 Multi-University Training Contest - Team ...

  7. VUE路由过度效果vs缓存

    app页面 router.js

  8. jsp+上传组件+文件夹+文件

    上次遇到这样一个问题,客户上传高清视频(1G以上)的时候上传失败. 一开始以为是session过期或者文件大小受系统限制,导致的错误.查看了系统的配置文件没有看到文件大小限制,web.xml中sees ...

  9. LYK loves music

    Description LYK喜欢听音乐,它的歌单里共有n首音乐,而且它每次听音乐时都是连续地听m首, 它甚至能记得自己给每首音乐的评分ai. 现在它想选择一首歌开始听,使得接下来连续m首歌的评分&l ...

  10. BZOJ 4034 [HAOI2015]树上操作 线段树+树剖或dfs

    题意 直接照搬原题面 有一棵点数为 N 的树,以点 1 为根,且树点有边权.然后有 M 个 操作,分为三种: 操作 1 :把某个节点 x 的点权增加 a . 操作 2 :把某个节点 x 为根的子树中所 ...