sort()方法妙用 DOM 排序

DOM 排序

DOM结构:

javascript:

var rows = document.getElementsByTagName("tbody")[0].getElementsByTagName("tr"); // 获取元素
var arr = [];
    
for(var i=0;i<rows.length;i++){
  arr.push(rows[i]) // 把 DOM 对象集合推到一个数组里，才能用 sort() 方法
}
​
arr.sort(function(a1,a2){ // 用 sort() 方法给带有 DOM 元素的数组排序
 var a1Value = parseInt(a1.children[2].innerHTML);
 var a2Value = parseInt(a2.children[2].innerHTML);
 return a1Value - a2Value;
});
​
var table = document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0];
arr.forEach(function(n){
 table.appendChild(n)
}); // 重新渲染到页面，完成排序

运行上面的代码后，即完成表格按价格从低到高排序，本编辑器貌似不支持上传第二张图，就不上图了

sort() 方法

var arr1 = [1,2]; // 定义一个简单的数组
​
arr1.sort(function(){
  return 5565; // 返回 0.1，10，555等任何正数都是一样的
});
 
console.log(arr1); // 不会改变顺序
​
arr1.sort(function(){
  return 5565; // 返回 0.1，10，555等任何正数都是一样的
});
 
console.log(arr1); // 改变了顺序
 
// 小结，返回一个负数和 0 时，就会改变原有的顺序，返回一个正数时，不会改变顺序
​
 
arr1.sort(function(a1,a2){
  return a1-a2 // a1-a2 > 0 数组中的数不会被改变顺序，console.log(arr1) 会输出 1 2
});
 
 
arr1 = [2,1];
​
arr1.sort(function(a1,a2){
  return a1-a2 // 返回值是大于零还是小于 0 ？console.log(arr1) 会输出什么？
});
console.log(arr1); // 输出的是 ［１,２］
​
arr1.sort(function(a1,a2){
  return a2-a1 // 返回值是大于零还是小于 0 ？console.log(arr1) 会输出什么？
});
console.log(arr1); // 输出的是 ［2,1］
 
// 用参数中的第一个数减去第二个数，返回的数组就会是从小到大，升序排列
// 用参数中的第二个数减去第一个数，返回的数组就会是从大到小，降序排列
​
arr1 = [2,1];
arr1.sort(function(){
  return Math.random()-0.5 // 返回的值 = [0 ~ 1] - 0.5 = [(-0.5) ~ 0.5]
});
 
console.log(arr1); // 我们永远都不会知道是是会输出 [1,2]，还是 [2,1]

总结

在 DOM 或需要排序的数据利用 sort 进行排序时，可以编写更复杂的对比函数，按需要返回正数或负数或0，进尔改变数据元素的排序。