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

来源：互联网发布：粉红色的火烈鸟知乎编辑：程序博客网时间：2024/06/16 14:36

<!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.onload=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>

阅读全文

0 0