js在对页面中列表进行排序时,数组的添加,过滤,大小写,首字母大写

js在dom元素中根据某些‘属性’排序

添加元素

var myArr=new Array(),arr=[];//两种数组定义形式
$('#id p').each(function(){//获取每一个元素
     arr.push($(this).attr('divName').toLowerCase());//向数组中添加每一个p元素中属性为divName的值,并转化为小写。
 });

divName是自定义属性,当然也可以是其他属性。

过滤已有元素(值相等)

for(var i =0;i<arr.length-1;i++){//过滤已的元素得到新的数组myArr
    if(myArr.indexOf(arr[i]) == -1){
  		 myArr.push(arr[i]);//添加myArr中没有的元素
 	}
 }

具体indexOf方法说明请看文档

单词首字母大写

for(var j=0;j<myArr.length;j++){//让数组的每个元素都改为首字母大写
        myArr[j]=capitalize(myArr[j]);
    }
/*
*
*/    
function capitalize(str){//返回当前字符串为首字母大写
    return str.replace( /(^|\s)([a-z])/g ,
       function(m,p1,p2){ return p1+p2.toUpperCase();
    });
};

//测试
console.log(capitalize('Hello world'));//输出 Hello World
console.log(capitalize('hello world'));//输出 Hello World
console.log(capitalize('Hello wORLD'));//输出 Hello WORLD

如上诉输出,该函数只针对单词的首字母,而对单词中的其他字母不做改变

排序

//$result 表示整个列表的外框   
//.myListFather表示每个列表元素的类名,也就是你要排序的每一条元素的共有类名。
var orderByArray = [];
$result.find('.myListFather').each(function () {//向数组中添加列表中的每一个元素outerHTML
    orderByArray.push(this.outerHTML)
})

orderByArray.sort(function (a, b) {//数组有序排列
    if (type=='价格排序') {//判断按价格排序( 数字大小)
        if($(_this).find('i').hasClass('up')){//正序
             return orderGetPrice(a) - orderGetPrice(b);
        }
        else{//倒序
            return orderGetPrice(b) - orderGetPrice(a);
        }
    }
});

// 获取每行的价格用来作比较
function orderGetPrice(dom) {//返回dom下某一条数据内容,这里是$('.price').text()
    return $(dom).find(' .price').length ? parseFloat($(dom).find('.price').text().substr(1)) : 9999999 
     // 没有价格的就设置一个很大的价格去比较,自动排在最后
}

以上内容中关键是orderGetPrice函数返回的是什么,具体执行的是什么(这个地方根据需求返回什么,函数名自定义,只返回一个用作比较的数据,比如返回字符串则比较的是首字母ascall码值)。

其中$(_this)表示当前点击的对象,$(_this).find('i').hasClass('up')以此来判断用正序或者倒序。

猜你喜欢

转载自blog.csdn.net/qq_37742572/article/details/87918415