JS DIV 点击排序

JavaScript017

JS DIV 点击排序,第1张

<script type="text/javascript">

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添加私有属性,通过私有属性排序。