js实现dom排序

最新推荐文章于 2020-09-25 10:28:56 发布

jimjiayu

最新推荐文章于 2020-09-25 10:28:56 发布

阅读量1k

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/zhongshijun521/article/details/96989847

版权

javascript 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div排序</title>
    </style>
</head>
<body>
<div id="box">
     <div index = "7"><span>7777</span></div>
	<div index = "3"><span>3333</span></div>
	<div index = "4"><span>4444</span></div>
	<div index = "5"><span>5555</span></div>
	<div index = "2"><span>6666</span></div>
	<div index = "0"><span>0000</span></div>
	<div index = "8"><span>8888</span></div>
	<div index = "1"><span>1111</span></div>
	<div index = "6"><span>6666</span></div>
	<div index = "9"><span>9999</span></div>
</div>
	<script>
          var box = document.getElementById('box');
          var childs=box.getElementsByTagName('div');
		  var arr=[];
					
		  for(var i=0;i<childs.length;i++) 
			{
				arr[i]=childs[i];
			}
		  arr.sort(function(div1,div2){
						
			var n1=parseInt(div1.getAttribute('index'));
			var n2=parseInt(div2.getAttribute('index'));
			return n1-n2;  
		  })
					
		  for(var i=0;i<arr.length;i++){
				box.appendChild(arr[i]);   //排序之后再写入
		   }
        
	</script>
</body>
	
</html>

jimjiayu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js实现dom排序

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div排序</title> </style></head><body><div id="box"> ...
复制链接

扫一扫

专栏目录