按字符串顺序重新排序DOM节点

港控/mmm° 2023-10-18 12:24 6阅读 0赞

#### 按字符串顺序重新排序DOM节点 ####

*  题目
 *  答案
 *  分析
 *   *  思路一
     *  思路二
     *  思路三

## 题目 ##

<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>

## 答案 ##

// sort list:
    var root = document.getElementById('test-list');
    var list = document.getElementsByClassName('lang');
    console.log(list);
    for(var i=0;i<list.length;i++){
        
    for(var j=0;j<list.length-1;j++){
        
    if(list[j].innerText>list[j+1].innerText){
        
    root.insertBefore(list[j+1], list[j]);
    }
    }
    }
    console.log(list[0].innerText);
    // 测试:
    ;(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()) {
        
                console.log('测试通过!');
            }
            else {
        
                console.log('测试失败: ' + arr.toString());
            }
        }
        else {
        
            console.log('测试失败!');
        }
    })();

## 分析 ##

### 思路一 ###

通过Class的名字获取列表后进行排序，然后使用appendChild设置回去  
但是行不通

### 思路二 ###

通过冒泡算法，每次比较出最小，然后使用appendChild设置到最后，还是不通

### 思路三 ###

通过两两比较，再通过一个insertBefore，交换在Dom树中的位置