使用jQuery实现点击价格按钮实现商品列表的升序和降序

实现点击价格按钮进行排序，个人建议由后台提供的数据进行处理升序、降序。这里通过前台的jQuery处理升降序。

代码：

 

$(function () {
    var a = 0;
    $("#s1").click(
        function () {
            a++;
            //console.log("hello");//显示消息，不影响页面的加载
            var arr = new Array();
            //遍历节点取值赋给数组，并绑定事件
            //.each(function(index,Element))   返回jQuery
            // 描述：遍历一个jQuery对象，为每个匹配元素执行一个函数
            //index表示当前元素的位置  e表示当前的元素
            $(".clist span").each(function (index, e) {
                //alert("index:"+index)
               // alert("e:"+e)
                arr[index] = parseInt($(e).text().substring(1));
            });

            if(a%2 != 0){
                //  升序
                for (var i = 1; i < arr.length; i++) {
                    for (var j = 0; j < arr.length - i; j++) {
                        var temp = 0;
                        if (arr[j] > arr[j + 1]) {
                            temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                        }
                    }
                }
            }else{
                //  降序
                for (var i = 1; i < arr.length; i++) {
                    for (var j = 0; j < arr.length - i; j++) {
                        var temp = 0;
                        if (arr[j] < arr[j + 1]) {
                            temp = arr[j];
                            arr[j] = arr[j + 1];
                            arr[j + 1] = temp;
                        }
                    }
                }
            }

            // 获取数组的长度
            var len = $(".clist span").size();
            //取到li下的数字值
            //把li与数组一一对应的顺序进行追加到ul
            for(var i=0;i<arr.length;i++) {
                for(var j=0;j<len;j++) {
                    if(arr[i]==$(".clist span").eq(j).text().substring(1)) {
                       // console.log(i+""+j);
                        $(".clist span").eq(j).parents("li").remove().appendTo(".clist");
                        break;
                    }
                }
            }
        });

});