JavaScript排序

<!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>

posted @ 2015-12-09 01:14  常平  阅读(124)  评论(0编辑  收藏  举报