html自动排序数字,jquery简单的数字列表排序代码

特效描述：数字列表排序。jquery列表排序小插件，能实现从大到小和从小到大排序

代码结构

1. 引入CSS

2. 引入JS

3. HTML代码

• 4
• 7
• 9
• 2
• 1
• 5
• 6
• 8
• 3
• 3

从小到大取消排序从大到小

var color = ['#ffcc66' , '#ffcccc' , '#cccc33' , '#cccccc' , '#999933' , '#9999cc' , '#663333' , '#6666cc' , '#FF6A6A' , '#009966'];

var initList = [], domArr = [];

$('li').each(function(a){

$(this).css('background' , color[a]);

$(this).attr('title' , '原位置为：'+(a+1));

initList[a] = $(this).html();

})

/*

从小到大排序

*/

function smallToBig(){

getDom();

$.each(domArr , function(i){

$.each(domArr , function(j){

if( domArr[i].html() < domArr[j].html()){

mid = domArr[j]; domArr[j] = domArr[i]; domArr[i] = mid;

}

})

})

appendDom();

}

/*

取消排序

*/

function cancleRank(){

getDom();

$.each(initList,function(b){

$.each(domArr,function(c){

if(domArr[c].html() == initList[b]){

$('ul').append(domArr[c]);

}

})

})

}

/*

从大到小排序

*/

function bigToSmall(){

getDom();

$.each(domArr , function(i){

$.each(domArr , function(j){

if( domArr[i].html() > domArr[j].html()){

mid = domArr[j]; domArr[j] = domArr[i]; domArr[i] = mid;

}

})

})

appendDom()

}

/*

取出所有li放进数组

*/

function getDom(){

$('li').each(function( m ){

domArr[m] = $(this);

})

}

/*

将数组中的li插入ul(原ul中的li自动删除。DOM元素的特性。)

*/

function appendDom(){

$.each( domArr, function(d){

$('ul').append( domArr[d] );

})

}

var funSum = [ smallToBig , cancleRank , bigToSmall];

$('button').click(function(){

var fun = funSum[$(this).index()]

fun();

})