• 需求：一個問答頁面，要提供三種排列（最新提問 尚未回答 熱門）
• 情況：前頁面是別人畫的，有三個tab切換，我考慮如下兩種情況：
• （1）可以對應tab標題從資料庫取相應型別的記錄，分三次取資料；點選排列時，分別重新按三個型別再用order by取一遍，多次操作資料庫。
• （2）也可以一次從資料庫取出所有型別的記錄，通過控制display屬性，達到tab切換，在前端通過jquery給節點按自定義屬性值排序，單次操作資料庫。 1.給前臺資料容器標籤新增自定義屬性

<section class="box" type="${qn.type}" time="${qn.pubtime}" 
data
 
="${qn.answers},${qn.votes},${qn.visitors}">

function sortByAVV(){
    //sortByAVV means by 5*Answer+3*Votes+1*Visitors
    var allBox = $(".box");
    var showBox = new Array();
    for(var i = 0; i < allBox.length;i++){
        if($(allBox[i]).css("display")=='block')
            showBox.push(allBox[i]);
    }
    //showBox就是我們要排列的外盒
 

    for(var j = 0; j < showBox.length;j++){
        var data = $(showBox[j]).attr("data").split(",");
        var score = 5*parseInt(data[0]) + 3*parseInt(data[1]) + parseInt(data[2]);
        $(showBox[j]).attr("score",score);
        //remove()和empty()的區別是，前者刪除自己內部包括自身的所有節點，後者只刪除內部
    }
    for(var
 
 k = 0; k < showBox.length - 1;k++){
        for(var q = k+1; q < showBox.length;q++){
            var score1 = parseInt($(showBox[k]).attr("score"));
            var score2 = parseInt($(showBox[q]).attr("score"));
            if(score2 > score1){
                $(showBox[q]).insertBefore($(showBox[k]));
                var allBox = $(".box");
                var showBox = new Array();
                for(var i = 0; i < allBox.length;i++){
                if($(allBox[i]).css("display")=='block')
                    showBox.push(allBox[i]);
                }
            }
        }   
    }
}

function getNoRsp(){
        var allBox = $(".box");
        var showBox = new Array();
        for(var i = 0; i < allBox.length;i++){
            if($(allBox[i]).css("display")=='block')
                showBox.push(allBox[i]);
        }
        for(var j = 0; j < showBox.length;j++){
            var data = $(showBox[j]).attr("data").split(",");
            var answers = parseInt(data[0]);
            if(answers != 0)
                $(showBox[j]).css("display","none");
        }
}

function sortByTime(){
    var allBox = $(".box");
    var showBox = new Array();
    for(var i = 0; i < allBox.length;i++){
        if($(allBox[i]).css("display")=='block')
            showBox.push(allBox[i]);
    }
    for(var j = 0; j < showBox.length;j++){
        var dateStr = $(showBox[j]).attr("time");
        var date = new Date(dateStr);
        var millis = date.getTime();
        $(showBox[j]).attr("millis",millis);
    }
    for(var k = 0; k < showBox.length - 1;k++){
        for(var q = k+1; q < showBox.length;q++){
            var millis1 = parseInt($(showBox[k]).attr("millis"));
            var millis2 = parseInt($(showBox[q]).attr("millis"));
            if(millis2 > millis1){
                $(showBox[q]).insertBefore($(showBox[k]));
                //這裡我必須重新整理一遍showBox內容
                var allBox = $(".box");
                var showBox = new Array();
                for(var i = 0; i < allBox.length;i++){
                if($(allBox[i]).css("display")=='block')
                    showBox.push(allBox[i]);
                }
            }
        }   
    }
}