按ID排列页面div元素

页面div元素乱序排列，我想通过点击超链接实现DIV按id从小到大排列，应该怎么做，源码如下：<a href="#">点击这里排序</a>
<div style="float:left;" id="1">详细内容</div>
<div style="float:left;" id="11">详细内容</div>
<div style="float:left;" id="15">详细内容</div>
<div style="float:left;" id="44">详细内容</div>
<div style="float:left;" id="32">详细内容</div>
<div style="float:left;" id="23">详细内容</div>
<div style="float:left;" id="45">详细内容</div>
<div style="float:left;" id="3">详细内容</div>

解决方案 »

  1.   


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
    <html> 
    <head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
    <title>排序</title> 
    </head>
    <body>
    <a href="#" onclick="sort()">点击这里排序 </a>
    <div id="sortDiv">
        <div style="float:left;" id="1">详细内容1 </div> 
        <div style="float:left;" id="11">详细内容11 </div> 
        <div style="float:left;" id="15">详细内容15 </div> 
        <div style="float:left;" id="44">详细内容44 </div> 
        <div style="float:left;" id="32">详细内容32 </div> 
        <div style="float:left;" id="23">详细内容23 </div> 
        <div style="float:left;" id="45">详细内容45 </div> 
        <div style="float:left;" id="3">详细内容3 </div>
    </div> 
    </body> 
    </html> <script type="text/javascript">
        function sort() {
            var sortDiv = document.getElementById('sortDiv'), divs = sortDiv.childNodes;
            var divIDs = [];
            for (var i = 0, count = divs.length; i < count; i++) {
                divIDs.push(divs[i]);
            }
            divIDs.sort(function(e1, e2) {
                return e1.id - e2.id;
            });
            for (var i = 0, count = divIDs.length; i < count; i++) {
                sortDiv.appendChild(divIDs[i]);
            }
        }
    </script>
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
     <head>
      <title> new document </title>
     </head>
     <body>
    <a id="ahref" href="#">点击这里排序 </a> 
    <div id="container">
    <div id="1">详细内容1 </div> 
    <div id="11">详细内容 11</div> 
    <div id="15">详细内容 15</div> 
    <div id="44">详细内容 44</div> 
    <div id="32">详细内容 32</div> 
    <div id="23">详细内容 23</div> 
    <div id="45">详细内容 45</div> 
    <div id="3">详细内容3 </div>
    </div>
    <script type="text/javascript">
    (function(){
    function compared(div1, div2) {
    return parseInt(div1.id, 10) - parseInt(div2.id, 10); 
    };
    function sortDiv(){
    var odiv = document.getElementById('container'),
    sorts = odiv.getElementsByTagName('div'),
    frag = document.createDocumentFragment();
    var i = 0, list = [], len = sorts.length;
    for(; i < len; i++) {
    list[i] = sorts[i];
    }
    list.sort(compared);
    for(var j = 0 ,len2 = list.length; j < len2; j++){
    frag.appendChild(list[j]);
    }
    odiv.appendChild(frag);
    }
    document.getElementById('ahref').onclick = sortDiv;
    })();
    </script>
     </body>
    </html>
      

  3.   

    jQuery版
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>元素排序</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
         function sortElement()
         {
         var arr=new Array();
         jQuery.each($("#box").find("div"),function(){
         arr.push($(this).attr("id"));
         });
         var sortedArr=arr.sort();
         var newhtml="";
         jQuery.each(sortedArr,function(){
         newhtml +=$("#"+this).attr("outerHTML");
         });
         $("#box").html(newhtml);
         }
        </script>
    </head><body>
    <a href="#" onclick="sortElement();">点击这里排序 </a> 
    <div id="box">
    <div style="float:left;" id="15">详细内容15</div> 
    <div style="float:left;" id="1">详细内容1 </div> 
    <div style="float:left;" id="11">详细内容11 </div> 
    <div style="float:left;" id="44">详细内容44 </div> 
    <div style="float:left;" id="32">详细内容32 </div> 
    <div style="float:left;" id="23">详细内容23 </div> 
    <div style="float:left;" id="45">详细内容45 </div> 
    <div style="float:left;" id="3">详细内容3 </div>
    </div>
    </body></html>
      

  4.   

    刚才那个ff下不行,修改如下:
    <html><head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
    <title>元素排序</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
         function sortElement()
         {
         var arr=new Array();
         jQuery.each($("#box").find("div"),function(){
         arr.push($(this).attr("id"));
         });
         var newDivs=new Array();
         jQuery.each(arr.sort(),function(){
         newDivs.push($("#"+this));
         });
         $("#box").html("");
         jQuery.each(newDivs,function(){
         $("#box").append($(this));
         });
         }
        </script>
    </head><body>
    <a href="#" onclick="sortElement();">点击这里排序 </a> 
    <div id="box">
    <div style="float:left;" id="15">详细内容15</div> 
    <div style="float:left;" id="1">详细内容1 </div> 
    <div style="float:left;" id="11">详细内容11 </div> 
    <div style="float:left;" id="44">详细内容44 </div> 
    <div style="float:left;" id="32">详细内容32 </div> 
    <div style="float:left;" id="23">详细内容23 </div> 
    <div style="float:left;" id="45">详细内容45 </div> 
    <div style="float:left;" id="3">详细内容3 </div>
    </div>
    </body></html>
      

  5.   

            divIDs.sort(function(e1, e2) {
                return e2.id - e1.id;
            });
      

  6.   


    排序改为：
    divIDs.sort(function(e1, e2) { return e2.id - e1.id; });