请看以下html:
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> </head> <body> <div class="aBox" style=""> <a href="javascript:void(0)" tabid="15">数学</a> <a href="javascript:void(0)" tabid="6">诚信</a> <a href="javascript:void(0)" tabid="10">奉献</a> <a href="javascript:void(0)" tabid="1">爱情</a> <a href="javascript:void(0)" tabid="23">感恩</a> <a href="javascript:void(0)" tabid="9">勤奋</a> <a href="javascript:void(0)" tabid="2">读书</a> <a href="javascript:void(0)" tabid="12">道德</a> <a href="javascript:void(0)" tabid="24">目标</a> <a href="javascript:void(0)" tabid="14">人生</a> <a href="javascript:void(0)" tabid="17">母爱</a> <a href="javascript:void(0)" tabid="16">英语</a> <a href="javascript:void(0)" tabid="22">童年</a> <a href="javascript:void(0)" tabid="3">励志</a> <a href="javascript:void(0)" tabid="18">劳动</a> <a href="javascript:void(0)" tabid="19">亲情</a> <a href="javascript:void(0)" tabid="7">爱国</a> <a href="javascript:void(0)" tabid="8">激励</a> <a href="javascript:void(0)" tabid="11">真理</a> <a href="javascript:void(0)" tabid="4">时间</a> <a href="javascript:void(0)" tabid="21">团结</a> <a href="javascript:void(0)" tabid="20">创新</a> <a href="javascript:void(0)" tabid="5">友情</a> <a href="javascript:void(0)" tabid="13">理想</a> <a href="javascript:void(0)" tabid="1">爱情</a> <a href="javascript:void(0)" tabid="23">感恩</a> <a href="javascript:void(0)" tabid="9">勤奋</a> <a href="javascript:void(0)" tabid="2">读书</a> <a href="javascript:void(0)" tabid="12">道德</a> <a href="javascript:void(0)" tabid="24">目标</a> <a href="javascript:void(0)" tabid="14">人生</a> <a href="javascript:void(0)" tabid="17">母爱</a> <a href="javascript:void(0)" tabid="16">英语</a> </div> </script> </body> </html>
假设根据li下的tabid来排序，这里涉及到去重和排序两个问题；
A 同学的代码如下：
<script src="https://code.jquery.com/jquery-3.2.1.js"></script> <script> $(function(){ let arr=[], alla=$('.aBox').find('a'); $('.aBox').find('a').remove(); for(let i=0;i<alla.length;i++){ arr.push(alla[i]) } arr.sort(function(a1,a2){ let n1=Number($(a1).attr('tabid')); let n2=Number($(a2).attr('tabid')); return n1-n2; }); for(let m=0;m<arr.length;m++){ for(let n=m+1;n<arr.length;n++){ if($(arr[m]).attr('tabid')==$(arr[n]).attr('tabid')){ arr.splice(n,1); m--; n--; } } } for(let j=0;j<arr.length;j++){ $('.aBox').append(arr[j]); } })
我们看到，她用了4次循环；
我的第一版代码如下：
var ar = document.querySelectorAll(".aBox"); var ara=document.querySelectorAll(".aBox a"); var frag=document.createDocumentFragment(); for (var i = 0,l=ara.length ; i < l; i++) { var k='a[tabid=\"'+i+'\"]'; var x=document.querySelectorAll(k)[0]; if(x){ frag.appendChild(x); } } $(".aBox a").remove(); $(".aBox").append($(frag));
我们看到，她用了4次循环；
我的第一版代码如下：
var ar = document.querySelectorAll(".aBox"); var ara=document.querySelectorAll(".aBox a"); var frag=document.createDocumentFragment(); for (var i = 0,l=ara.length ; i < l; i++) { var k='a[tabid=\"'+i+'\"]'; var x=document.querySelectorAll(k)[0]; if(x){ frag.appendChild(x); } } $(".aBox a").remove(); $(".aBox").append($(frag));
能否优化？
第二版如下:
$( function () { var ar = $(".aBox"); var frag = document.createDocumentFragment(); var i = 1; while (i) { let x = ar.find('a[tabid=\"' + i++ + '\"]')[0]; x ? frag.appendChild(x) : i = 0; } ar.empty().append($(frag)) } )
虽然看着代码少了，
但是重要的是性能,而非代码行数，这里主要包括，l=arr.length，这样能减少对数组的操作；ar：首先将变量保存，这是很好的习惯，然后ar.find能减少对DOM的遍历；虽然find()括号中属性选择器一般遍历的时间会更长，但是这里不存在这个问题，主要因为只需要对已经保存了的ar进行遍历，绕开了DOM，所以性能会有提高；
但推荐用原生js写比较好；用兴趣的小伙伴可以试一试，也很简单的；
也有小伙伴是这样写的，供大家参考，也是一种思路：
Array.prototype.reset=function(attr){ this.sort((a, b) => a.getAttribute(attr) - b.getAttribute(attr)); var hash={},res= []; var len=this.length; for(var i=0;i<len;i++){ var key= this[i].innerHTML; if(!hash[key]){ res.push(this[i]); hash[key]=1; } } return res } var container=document.querySelector('.aBox'); var arr=document.querySelectorAll('.aBox>a'); var frag = document.createDocumentFragment(); var list=[],len=arr.length; for(var i=0;i<len;i++){ list.push(arr[i]) } var b=list.reset('tabid') len=b.length; for(var i=0;i<len;i++){ frag.appendChild(b[i]) } container.innerHTML=''; container.appendChild(frag)
