Jquery对前端页面进行排序

最新推荐文章于 2023-04-08 08:17:59 发布

江夏、

最新推荐文章于 2023-04-08 08:17:59 发布

阅读量1.3k

点赞数

分类专栏： Js And JQuery 前端文章标签： jquery js 前端页面排序

本文链接：https://blog.csdn.net/qq_41153943/article/details/100739701

版权

本文介绍了一个使用Jquery实现的前端页面排序功能。通过一个select元素，用户可以选择不同的option来改变页面元素的显示顺序。代码示例中详细说明了实现过程，适合需要动态调整前端布局的开发者参考。

摘要由CSDN通过智能技术生成

有这样一个需求，一个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的值为数字类型所以用parse