Jquery对前端页面进行排序

有这样一个需求,一个select元素,每个option代表一中排序方式,通过选择不同的option对前端的页面进行重新排序显示,代码如下,注释在代码里写的很详细:

 //对前端页面进行排序
       //通过juqery每次改变select的option来触发事件,live使得事件能够多次触发,直接change会     导致触发一次就不能再点击
        $(".opt").live('change', function(){
            var value= $(".opt").val();
            //当option得值为signed,按照signed升序的顺序进行排序。
            if(value=="signed"){
                 //下面为主要的比较方式
                 var sel = $('.list_main .list_unit');
                 //排序方式
                 sel.sort(function(a,b){
                 	//eq是下标,下面代码即表示 .list_unit 元素下面的第3个div的值,如果是第一个div就是eq(0)
                    var valveNumOfa = $(a).find('div:eq(2)').text();
                    var valveNumOfb = $(b).find('div:eq(2)').text();
                    //因为前端页面signed的值为数字类型所以用parseInt进行转换
                    //即如果前一个元素大于后一个元素则交换,否则不叫好
                    if(parseInt(valveNumOfa) > parseInt(valveNumOfb)){
                       return 1;
                    }else{
                       return -1;
                    }
                 });
                 //将排序后的元素拼接到页面上,注意这里的位置和前面的.list_main一样
                sel.detach().appendTo('.list_main');
            //根据编号排序,因为都是数字类型所以和signed一样
            }else if(value=="number"){
                 var sel = $('.list_main .list_unit');
                 sel.sort(function(a,b){
                    var valveNumOfa = $(a).find('span:eq(0)').text();
                    var valveNumOfb = $(b).find('span:eq(0)').text();
                    if(parseInt(valveNumOfa) > parseInt(valveNumOfb)){
                        return 1;
                    }else{
                        return -1;
                    }
                });
                sel.detach().appendTo('.list_main');
             //根据姓名排序,这里如果是数字则在最前面,如果然后是英文,然后是中文,中英文都是按照首字母顺序排列
            }else if(value=="cname"){
                 var sel = $('.list_main .list_unit');
                 sel.sort(function(a,b){
                    var valveNumOfa = $(a).find('span:eq(1)').text();
                    var valveNumOfb = $(b).find('span:eq(1)').text();
                    //如果都是汉字或者都不是汉字,则直接进行比较
                    if ((notChinese(valveNumOfa) && notChinese(valveNumOfb)) || (!notChinese(valveNumOfa) && !notChinese(valveNumOfb))) {
                         return valveNumOfa.localeCompare(valveNumOfb)
                    } else {
                   // 如果不都为英文或者汉字,就肯定有一个是英文,如果valveNumOfa是英文,返回-1,valveNumOfa在前,否则就是valveNumOfa是英文,valveNumOfa在前
                    if (notChinese(valveNumOfa)) {
                         return -1
                        } else {
                         return 1
                        }
                    }
                     //下面也是中文的比较方式,
                    //return valveNumOfa.localeCompare(valveNumOfb,"zh-Hans-CN");
                });
                sel.detach().appendTo('.list_main');
            }
        })

         //判断是否是中文
        function notChinese(char) {
                 const charCode = char.charCodeAt(0)
                 return charCode >= 0 && charCode <= 128
        }

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值