zoukankan      html  css  js  c++  java
  • <li>元素的排序

    要点:

    • getElementsByTagName("li")返回的是HTMLCollection对象,这个对象不同于Array对象,不能使用sort()方法进行排序~
    • 下面方法的要点是借壳Array对象,同时使用了appendChild的特性~
     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6     <script>
     7         window.onload = function () {
     8             var ul = document.getElementById("ul1");
     9             var btn = document.getElementById("btn1");
    10             var aLi = ul.getElementsByTagName("li");
    11 
    12             btn.onclick = function () {
    13                 var arr = [];           // 1. 创建一个Array对象
    14 
    15                 for (var i=0; i<aLi.length; i++) {
    16                     arr[i] = aLi[i];    // 2. 借壳Array对象
    17                 }
    18                                         // 3. 排序
    19                 arr.sort(function (li1, li2) {
    20                     return parseInt(li1.innerHTML) < parseInt(li2.innerHTML);
    21                 });
    22                                         // 4. 利用appendChild的特性
    23                 for (var i=0; i<arr.length; i++) {
    24                     ul.appendChild(arr[i]);
    25                 }
    26             }
    27         }
    28     </script>
    29 </head>
    30 <body>
    31     <input type="button" id="btn1" value="sort" />
    32     <ul id="ul1">
    33         <li>34</li>
    34         <li>25</li>
    35         <li>9</li>
    36         <li>88</li>
    37         <li>54</li>
    38     </ul>
    39 </body>
    40 </html>
  • 相关阅读:
    Oracle 数据库简介
    Qt 中事件与处理
    npm常用命令总结
    自适应宽度布局
    原生js发送ajax请求
    微信调试本地环境代码
    多行文本溢出显示省略号
    清除浮动
    用JQuery动态为选中元素添加/删除类
    input中加入搜索图标
  • 原文地址:https://www.cnblogs.com/linxd/p/4548842.html
Copyright © 2011-2022 走看看