利用元素属性值进行排序的简单实例

最新推荐文章于 2023-11-21 14:15:01 发布

MCcDullPig

最新推荐文章于 2023-11-21 14:15:01 发布

阅读量481

点赞数

分类专栏： web前端文章标签：排序利用元素属性值排序

本文链接：https://blog.csdn.net/McDullBro/article/details/75043335

版权

web前端专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
    <title></title>
	<style>
		ul{
			display:flex;
			flex-direction:column;
			text-align:center;
			list-style:none;
			padding-left:0;
			max-width: 360px;
			border:dashed 1px #aaa;
		}
		
		ul li{
			background:#fff;
		}
		li:nth-child(2n+0){
			background:#aaa;
		}
		.btn{
			width:40px;
			height:20px;
			background:#3385ff;
			color:#fff;
			text-align:center;
			line-height:20px;
			margin:10px
		}
		footer{
			display:flex;
		}
	</style>
</head>
<body>
<header>
</header>
<main>
<ul>
	<li sortnumber="7">7</li>
	<li sortnumber="19">19</li>
	<li sortnumber="31">31</li>
	<li sortnumber="47">47</li>
	<li sortnumber="11">11</li>
	<li sortnumber="23">23</li>
</ul>
</main>
<footer>
	<div class="btn sort">
		<span>sort</span>
	</div>
</footer>
</body>
<script>
	window.οnlοad=function(){

        var bubbleSortDom=function (children,parent) {
            var arr=[];
            for(var i=0;i<children.length;i++){
                arr.push(children[i]);
            }
            arr.sort(function (a,b){
                return Number(a.getAttribute('sortnumber'))-Number(b.getAttribute('sortnumber'));
            });
            for(var j=0;j<arr.length;j++){
                parent.append(arr[j]);
            }
        };

        document.querySelector('.sort').addEventListener('click', function () {
            var ul=document.querySelector('ul');
            var list=document.querySelectorAll('ul li');
            bubbleSortDom(list,ul);
        });
	}
</script>

</html>