将字符串顺序重新排序DOM节点(两种解法)

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>

JS代码

第一种解法：

利用insertBefore方法进行插入   较小的插入到较大的前面

var new_list = document.getElementById('test-list');
var new_list_child = document.getElementsByClassName('lang');
for(var i=0;i<new_list_child.length;i++){
　　for(var j = i+1;j<new_list_child.length;j++){
　　　　if(new_list_child[i].innerText > new_list_child[j].innerText){
　　　　　　new_list.insertBefore(new_list_child[j],new_list_child[i])
}
}
}

第二种解法：

通过 Array.protptype.slice.call().sort()  转换数组 进行排序  forEach循环遍历进行重新添加节点

var new_list = document.getElementById('test-list');

var new_list_child = new_list.children;

new_list_child = Array.prototype.slice.call(new_list_child).sort(function(a,b){

　　return a.innerHTML > b.innerHTML?1:-1;　　

})

new_list_child.forEach(function(el){

　　new_list.appendChild(el);

})

注：代码更新之后发现 存在只适用于同样大小写的情况，也就是说大写之间进行排序，小写之间进行排序，如果混在一起的话，例如：AfBcdE  结果为ABEcdf  这个问题后面我会注意改过来重新追加

 

转载于:https://www.cnblogs.com/Twotwo/p/8487022.html