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

  • 相关阅读:
    CSS
    javaScript高级:BOM和DOM
    Layui在弹出层实现轮播图效果
    SQL
    jQuery基础
    清除重复值:distinct
    tomcat的server.xml中进行配置来实现访问本地电脑的图片
    jQuery高级
    javascript基础:ECMAScript
    设计模式六大原则【设计模式学习开篇】
  • 原文地址:https://www.cnblogs.com/Dong-Ge/p/7607684.html
Copyright © 2011-2022 走看看