dom元素按照比较项排序

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