关于dom元素 按照一个比较项进行排序（比如dom的高度或文本值等…）
你好！ 这是我第一次使用 Markdown编辑器 也是第一次写CSDN。本篇文章介绍我在学习中用到的排序，每次排序按照思路都可以进行稍微修改一下就可以使用，希望能帮助大家。
应用实例1：
简单介绍一下小程序，input输入框输入10~100的数点击按钮在（左、右）插入或删除队列元素，下方红色统计按照上方输入的数进行显示，点击排序按照显示高低（也是输入的数字）进行排序。
排序完成后的样子 内部属性也要跟随
应用实例2：
这里简单介绍一下小程序，在输入框输入姓名、年龄后插入就可插入到统计表格中，点击移入变色鼠标在表格项中移动会有高亮显示，让操作人员更清晰的分辨指哪一行，点击删除可以删除数据，下方搜索可以搜索名字，搜索到的相应行有高亮显示，关键点排序是按照年领进行排序。而且内部属性和子元素都要进行跟随排序，
这里是排序后的样子
实例1代码段：
// 点击排序
// 点击按钮
$('.sortBtn').click(function() {
// 创建两个数组
var arr = [];
var arr1 =[];
$(".count div").each(function(idex) {
// console.log($(this).height());
// 拿到比较项放入数组
arr[idex] = $(this).height();
// 拿到dom
arr1[idex] = this;
// console.log(arr);
});
console.log(arr,arr1[0]);
// 排序比较项数组
arr.sort(function(a, b) {
return a - b;
});
console.log(arr,arr1);
// 循环遍历比较项数组
arr.forEach(function(item,idex){
// 内层循环dom数组
arr1.forEach(function(item2,idex2){
// 如果 比较项第一个 等于当前循环的比较项就进入
if(arr[idex] == $(arr1[idex2]).height()){
// 新建一个克隆dom
var $sortDom = $(arr1[idex2]).clone(true);
// 删除被克隆的
$(arr1[idex2]).remove();
// 将被克隆的插入
$('.count').prepend($sortDom);
// console.log($('.count').children());
// console.log($(arr1[idex2]));
arr1[idex2]="";
// console.log(item);
return;
}
})
});
});
此段代码中注释有详细说明具体操作，有注释掉的console.log()，这些打印的数据可以让调试更加清晰。
实例2代码段：
// 点击开始排序
$('.sortBtn').click(function(){
// 创建两个数组 盒子
var arr =[];
var arr1 = [];
$('.table tbody tr').each(function(idex){
// 拿到比较项放入数组
arr[idex] = parseInt($(this).children('td:eq(2)').text());
// 拿到dom元素放入数组
arr1[idex] = this;
});
// console.log(arr,arr1);
// 对比较项进行排序
arr.sort(function(a,b){
return b - a;
});
// console.log(arr);
// 循环遍历比较项数组
arr.forEach(function(item,idex){
// 内部循环dom数组
arr1.forEach(function(item1,idex1){
// 如果比较项数组的idex项 等于当前循环的比较项就进入
if(arr[idex] == $(arr1[idex1]).children('td:eq(2)').text()){
// 克隆
var $newDom = $(arr1[idex1]).clone(true);
// 删除被克隆的
$(arr1[idex1]).remove();
// 按照排序后的顺序插入
$('.table tbody').prepend($newDom);
}
});
});
});
实例2代码 和示例一区别在于实例2代码进行排序的dom元素内有子元素有属性，但整体来说区别不大。
扯淡环节：
作者介绍：
今年大学刚毕业，大学期间学的“软件技术”专业，（疫情原因和专业学的有点浅没有框架经验和项目经验）找的工作不太好，参加培训将大学期间的 html，css，js，jQuery又重新学习两遍，发现每一遍收获都不一样。希望自己发现的一些小方法能帮助你们，个人建议如果你是初学者或初级开发真的需要多看多练，看会后可以帮我点个赞哦！！！！
++;
如果是在校大学生即将要找工作，可以跟我聊一下我会跟你分享一下我踩过的坑。 希望各位读者，工作顺利，身体健康，保护头发！！！
经典语录：我的头发在桌上，在地下，在衣服上，电脑上，就是不再我头上。
联系方式：
微信：Congcong9987
QQ: 1160005720、89677498
