zoukankan      html  css  js  c++  java
  • 将字符串顺序重新排序DOM节点

    对于一个已有的HTML结构:

    1. Haskell
    2. JavaScript
    3. Python
    4. Ruby
    5. Scheme
    <!-- HTML结构 -->
    <ol id="test-list">
        <li class="lang">Scheme</li>
        <li class="lang">JavaScript</li>
        <li class="lang">Python</li>
        <li class="lang">Ruby</li>
        <li class="lang">Haskell</li>
    </ol>

    javascript代码:

    var list = document.getElementById('test-list')
    var slist = list.children;
    console.log(slist);
    slist = Array.prototype.slice.call(slist).sort(function(a, b){
       return a.innerHTML > b.innerHTML ? 1 : -1 ;
    })
    slist.forEach(function(el){
         list.appendChild(el);
    })

    测试:

    // 测试:
    ;(function () {
        var
            arr, i,
            t = document.getElementById('test-list');
        if (t && t.children && t.children.length === 5) {
            arr = [];
            for (i=0; i<t.children.length; i++) {
                arr.push(t.children[i].innerText);
            }
            if (arr.toString() === ['Haskell', 'JavaScript', 'Python', 'Ruby', 'Scheme'].toString()) {
                alert('测试通过!');
            }
            else {
                alert('测试失败: ' + arr.toString());
            }
        }
        else {
            alert('测试失败!');
        }
    })();

    内容摘自https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000/0014359940861047248456754f44e55919fe9370c723ae6000#0

  • 相关阅读:
    委托学习小记(1)
    C# 对XML的 创建、查询
    C#多线程学习(六) 互斥对象
    C#多线程学习(二) 如何操纵一个线程
    C#多线程学习(四) 多线程的自动管理(线程池)
    16/11/22_plsql
    写日志
    内存检测
    开源
    vs2005 远程调试。
  • 原文地址:https://www.cnblogs.com/Dong-Ge/p/7607684.html
Copyright © 2011-2022 走看看