实现点击价格按钮进行排序,个人建议由后台提供的数据进行处理升序、降序。这里通过前台的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; } } } }); });