var div=document.getElementsByTagName("div")[0]
div.onclick=function(){
if(this.children[0].innerHTML=="正序"){
this.children[0].innerHTML="反序"
}else{
this.children[0].innerHTML="正序"
}
var divs=document.getElementsByClassName("titleDiv")
for(var i=0,arr=[]i<divs.lengtharr.push(divs[i++]))
arr.reverse()
for(var i=0i<arr.lengthdocument.body.appendChild(arr[i++]))
}
</script>
可以连续改变顺序
可以1 2 3 4 5,
也可以5 4 3 2 1
<body><div data-id="1">1111111</div>
<div data-id="4">2222222</div>
<div data-id="3">3333333</div>
<div data-id="5">4444444</div>
<div data-id="2">5555555</div>
</body>
<script>
var aDiv = document.getElementsByTagName('div')
var arr = []
for(var i=0i<aDiv.lengthi++)
{
arr.push(aDiv[i]) //aDiv是元素的集合,并不是数组,所以不能直接用数组的sort进行排序。
}
arr.sort(function(a,b){return a.getAttribute('data-id') - b.getAttribute('data-id')})
for(var i=0i<arr.lengthi++)
{
document.body.appendChild(arr[i]) //将排好序的元素,重新塞到body里面显示。
}
</script>
思路:给div添加私有属性,通过私有属性排序。