有这样一个需求，一个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
        }