利用JS进行重新排序输出的问题。

想要实现点击某链接然后根据话题数量(title值)进行降序排序，不知道该如何利用JS或者JQuery实现，希望高手指点，感谢！
//初始状态
<a id="order" href="#">点击排序</a>
<div id="list-tag">
<a href="#"  title="1 个话题"  >标签 No1</a>
<a href="#"  title="6 个话题" >标签 No2</a>
<a href="#"  title="3 个话题" >标签 No3</a>
<a href="#" title="5 个话题" >标签 No4</a>
<a href="#"  title="10 个话题" >标签 No5</a>
</div>
//排序输出
<a id="order" href="#">点击排序</a>
<div id="list-tag">
        <a href="#"  title="10 个话题" >标签 No5</a>
<a href="#"  title="6 个话题" >标签 No2</a>
<a href="#" title="5 个话题" >标签 No4</a>
<a href="#"  title="3 个话题" >标签 No3</a>
<a href="#"  title="1 个话题"  >标签 No1</a>
</div>

解决方案 »

  1.   


    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="gb2312" />
    <title></title>
    <style>
    a { display:inline-block; width:90px; }
    </style>
    </head>
    <body>
    <button id="asc">asc</button>
    <button id="desc">desc</button>
    <div id="list-tag">
    <a href="#"  title="1 个话题"  >标签 No1</a>
    <a href="#"  title="6 个话题" >标签 No2</a>
    <a href="#"  title="3 个话题" >标签 No3</a>
    <a href="#" title="5 个话题" >标签 No4</a>
    <a href="#"  title="10 个话题" >标签 No5</a>
    </div>
    <script>
    function $(o){return document.getElementById(o)}
    function makeArray( obj ){
    var arr = [];
    for ( var i = 0, len = obj.length; i < len; i++ ){
    arr.push(obj[i]);
    }
    return arr;
    }
    function asc( x, y ){ //升序
    return parseInt( x.title.match(/\d+/) ) - parseInt( y.title.match(/\d+/) );
    } function makeOrder( wrapper, obj, order ){
    var order = order || 'asc';
    var wrapper = $( wrapper );
    var obj = wrapper.getElementsByTagName( obj );
    var arr;
    arr = makeArray( obj ); // 将对象转为数组
    if ( order == 'asc' ){
    arr.sort( asc );
    } else {
    arr.sort( asc ).reverse();
    }
    for( var i = 0, len = arr.length; i < len; i++ ){
    wrapper.appendChild( arr[i] )
    }
    }
    $('desc').onclick = function(){
    makeOrder( 'list-tag', 'a', 'desc' )
    }
    $('asc').onclick = function(){
    makeOrder( 'list-tag', 'a', 'asc' )
    }


    </script>
    </body>
    </html>
      

  2.   

    jquery 直接sort就可以了<!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></title>
        <script type="text/javascript" src="jquery-1.6.4.min.js" ></script>
    </head>
    <body>
    <span id="order" style="cursor:pointer;" >点击排序</span>
    <div id="list-tag">
        <a href="#"  title="1 个话题"  >标签 No1</a>
        <a href="#"  title="6 个话题" >标签 No2</a>
        <a href="#"  title="3 个话题" >标签 No3</a>
        <a href="#" title="5 个话题" >标签 No4</a>
        <a href="#"  title="10 个话题" >标签 No5</a>
    </div>
    <script type="text/javascript" >
        $("#order").click(function() {
            $("#list-tag a").sort(function(a, b) {
                return parseInt($(a).attr("title")) < parseInt($(b).attr("title")) ? 1 : -1;
            }).appendTo($("#list-tag"));
        });
    </script></body>
    </html>
      

  3.   

    jquery很少用，用的是ext,不能从后台处理？？？
      

  4.   

    <script type="text/javascript">
    function sorts(){
    var a=[];
    var as=document.getElementById("list-tag").getElementsByTagName("a");
    for(var i=0;i<as.length;i++){
    a.push(as[i]);
    }
    a.sort(x);
    for(var m=0;m<a.length;m++){
    document.getElementById("list-tag").appendChild(a[m]);
    var b=document.createElement("br");
    document.getElementById("list-tag").appendChild(b);
    }
    }
    function x(as1,as2){
    var a=parseInt(as1.getAttribute("title"));
    var b=parseInt(as2.getAttribute("title"));
    return a-b;
    }
    </script>
    </head><body>
    <a id="order" href="javascript:sorts()">点击排序</a>
    <div id="list-tag">
        <a href="#"  title="1 个话题"  >标签 No1 1个话题</a><br/>
        <a href="#"  title="6 个话题" >标签 No2 6个话题</a><br/>
        <a href="#"  title="3 个话题" >标签 No3 3个话题</a><br/>
        <a href="#" title="5 个话题" >标签 No4 5个话题</a><br/>
        <a href="#"  title="10 个话题" >标签 No5 10个话题</a><br/>
    </div>