代码总结：使用jquery给节点排序

左手的ㄟ右手 2022-05-13 06:40 71阅读 0赞

*  需求：一个问答页面，要提供三种排列（最新提问 尚未回答 热门）
 *  情况：前页面是别人画的，有三个tab切换，我考虑如下两种情况：
 *  （1）可以对应tab标题从数据库取相应类型的记录，分三次取数据；点击排列时，分别重新按三个类型再用order by取一遍，多次操作数据库。
 *  （2）也可以一次从数据库取出所有类型的记录，通过控制display属性，达到tab切换，在前端通过jquery给节点按自定义属性值排序，单次操作数据库。  
    ![这里写图片描述][70]  
    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);
        }
        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]);
                    }
                }
            }   
        }
    }

[70]: /images/20220513/865deebf3f53493f813168222b1c3a1b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，71人围观）

还没有评论，来说两句吧...

相关阅读

相关给我写个冒泡排序代码

好的，这是一个冒泡排序代码： def bubble_sort(arr): for i in range(len(arr)):

缺乏、安全感/ 2024年03月25日 15:02/ 0 赞/ 75 阅读

相关 jquery获取子节点和父节点的示例代码

一、获取子节点比如是一个 id 为 test 的 div元素，我们这样选中，$('\test')，我们要查找这个div下的一个class为demo的span元素

柔光的暖阳◎/ 2022年08月21日 11:41/ 0 赞/ 403 阅读

相关 JS、Jquery父子节点总结（转）

1、JS的父子节点 del_ff(s); //清理空格 var chils= s.childNodes; //得

比眉伴天荒/ 2022年07月30日 13:57/ 0 赞/ 224 阅读

相关 JQuery获取节点的html代码

一：jQuery.html() 是获取当前节点下的html代码，并不包含当前节点本身的代码。二：然而我们有时候确需要包含当前节点的html代码。有的人通过

系统管理员/ 2022年06月18日 06:38/ 0 赞/ 437 阅读

相关总结一下jQuery操作元素节点的方法（创建、选择、插入节点）

我的个人博客开通了，地址：[https://timewentby.com][https_timewentby.com] 欢迎访问知识点一：创建节点注意：Jque

淩亂°似流年/ 2022年06月16日 06:56/ 0 赞/ 447 阅读

相关 jquery使用技巧总结

jquery使用技巧总结一、简介 1.1、概述随着WEB2.0及[ajax][]思想在互联网上的快速发展传播，陆续出现了一些优秀的Js框架，其中比较著名的

冷不防/ 2022年05月25日 23:53/ 0 赞/ 243 阅读

相关 jQuery_节点操作

一.内部插入节点 $('div').append(node); //在div内部的后面追加元素 node.appendTo($('div'));

向右看齐/ 2022年05月22日 12:24/ 0 赞/ 320 阅读

相关 JQuery Validate使用总结

一、导入js库 <script src="../js/jquery.js" type="text/javascript"></script> <script

妖狐艹你老母/ 2022年05月22日 08:52/ 0 赞/ 178 阅读

相关代码总结：使用jquery给节点排序

需求：一个问答页面，要提供三种排列（最新提问尚未回答热门）情况：前页面是别人画的，有三个tab切换，我考虑如下两种情况：（1）可以对应tab标题从数据

左手的ㄟ右手/ 2022年05月13日 06:40/ 0 赞/ 72 阅读

相关 jQuery--创建节点

创建节点根据W3C中的HTML DOM标准，HTML文档的所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。各种节点相互关联，共同形成了DOM树。

╰+攻爆jí腚メ/ 2021年08月13日 12:08/ 0 赞/ 476 阅读