<!DOCTYPE>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#bg{
height:100%;
widht:100%;
background-size:cover;
}
</style>
</head>
<body>
<div id="bg">
<div id="source">
<div>
<span>30</span>
<span>上海1</span>
<span>cwg1</span>
</div>
<div>
<span>27</span>
<span>上海3</span>
<span>cwg3</span>
</div>
<div>
<span>32</span>
<span>上海2</span>
<span>cwg2</span>
</div>
</div>
排序后:
<div id="divResult">
</div>
</div>
</body>
<script type="text/javascript">
// var bgDom = document.getElementById("bg");
// bgDom.style.backgroundImage="url('1.jpg')";
var source = document.getElementById("source")
// HTMLCollection对象
var source =source.children;
//将HTMLCollection对象转换成数组
var sourceArr = Array.prototype.slice.call(source);
console.info("----------");
console.info(source.constructor);
console.info(Object.prototype.toString.call(source));
console.info( source instanceof HTMLCollection);
console.info(source);
console.info("----------");
console.info(sourceArr.constructor);
console.info(Object.prototype.toString.call(sourceArr));
console.info(sourceArr instanceof Array);
console.info(sourceArr);
//对数组排序
var sortArr = sourceArr.sort(function(a,b){
//alert(a.children[0].innerHTML +"--"+ b.children[0].innerHTML);
//alert(a.getElementsByTagName("span")[0].innerHTML + "--" + b.getElementsByTagName("span")[0].innerHTML);
var p1 = parseInt(a.getElementsByTagName("span")[0].innerHTML);
var p2 = parseInt(b.getElementsByTagName("span")[0].innerHTML);
if(p1>p2){
return 1;
}else {
return -1;
}
});
var divResult = document.getElementById("divResult");
for(var i=0;i<sortArr.length;i++){
//divResult.appendChild(sortArr[i]);
//alert(sortArr[i].outerHTML);
divResult.innerHTML +=sortArr[i].outerHTML;
}
</script>
</html>