Jquery 如何實現(xiàn)ul中的ol排序？

如果想實現(xiàn)排序，你可以通過用ol的屬性進行排序。下面是個小例子：

網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、小程序制作、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了安源免費建站歡迎大家使用！

body

ul?id="ul"

ol?id="1"li1111111/li/ol

ol?id="4"li2222222/li/ol

ol?id="3"li3333333/li/ol

ol?id="2"li4444444/li/ol

/ul

/body

script

var?oUl?=?document.getElementById('ul');

var?aOl?=?oUl.children;????//aOl?是一個元素集合，只是有數(shù)組的方法。但不具備sort

var?arr?=?[];

for(var?i=0;iaOl.length;i++)

{

arr.push(aOl[i]);

}

arr.sort(function(a,b){return?a.id?-?b.id});??//這里用了數(shù)組的sort排序。

for(var?i=0;iarr.length;i++)

{

oUl.appendChild(arr[i]);???//重新加入oUl中。排序成功

}

/script

如何用jquery對列表進行排序？

思路：

1、利用jquery選擇器獲取li數(shù)組和ul節(jié)點

2、通過數(shù)組的sort方法對li進行排序

3、根據(jù)ul節(jié)點，清空原來li，再把排序后的li節(jié)點添加進去

代碼:

script

function?onTest(){

var?arr?=???$('li');

arr.sort(function(a,b){

return?a.innerHTMLb.innerHTML?1:-1;

});//對li進行排序，這里按照從小到大排序

$('ul').empty().append(arr);//清空原來內(nèi)容添加排序后內(nèi)容。

}

/script

/head

body

ul

lib/li

lia/li

lid/li

lic/li

/ul

a??onclick="onTest();"按鈕/a

/body

/html

jquery怎么實現(xiàn)正向排序反向排序

首先，我可以很負責的告訴你，jquery本身不帶有排序功能，表格數(shù)據(jù)的排序則更做不到。

js中可以通過sort()函數(shù)針對ASCII進行排序，當然面對數(shù)字的時候也可以自定排序規(guī)則

sort(function(a,b){return a-b;});像這樣

具體使用方法：array.sort(function(a,b){return a-b;});但是呢，像你這樣的數(shù)據(jù)型表格就不行了，另外數(shù)字和中文組合的排序我也沒試過

往往這種排序是通過數(shù)據(jù)庫中查詢語句（SQL）實現(xiàn)的。

就算是Jquery-easyUI的DataGrid控件也是需要通過跟后臺服務(wù)器交互才能實現(xiàn)排序功能。

不過也不是完全不能實現(xiàn)，這個就要復雜一點了，思路大概是通過js獲取每個格內(nèi)的數(shù)值然后以json嵌套的形式形成一個二維的數(shù)組數(shù)據(jù)。然后采用輪詢遍歷式的算法獲取最大/小值然后重寫表格，比較復雜需要上代碼么？

用jquery實現(xiàn)表格列排序？

$(document).ready(function()

{

//插件的形式

jQuery.fn.alterRowColors = function()

{

$('tbody tr:odd', this).removeClass('even').addClass('odd');

$('tbody tr:even', this).removeClass('odd').addClass('even');

return this;

}

//1.此時的函數(shù)是作為jQuery.fn的一個新屬性定義的，不是孤立的函數(shù)，這樣就把該函數(shù)注冊成了一個插件，

//2.使用關(guān)鍵字this，在一個插件內(nèi)部，this表示的是調(diào)用該插件的jQuery對象，

//3.最后在函數(shù)的末尾返回this,返回這個值可以使這個新方法能夠繼續(xù)連綴其他的方法。

var $sortOrder = 0; //排序類型 1表示升序，0表示降序

var $table = $('table#shop');

$table.alterRowColors();

$('th', $table).each(function( column )

{

//處理三種有可能存在的排序字段，比較方法

var findSortKey;

if( $(this).is('.sort-title') || $(this).is('.sort-author') )

{

findSortKey = function( $cell )

{

return $cell.find('.sort-title').text().toUpperCase()+ '' +$cell.text().toUpperCase();

}

}

else if( $(this).is('.sort-date') )

{

findSortKey = function( $cell )

{

return Date.parse('1' + $cell.text());

}

}

else if( $(this).is('.sort-price') )

{

findSortKey = function( $cell )

{

var key = parseFloat($cell.text().replace(/^[^\d.]*/, ''))

return isNaN(key) ? 0 : key;

}

}

//排序

if( findSortKey )

{

$(this).addClass('clickable').hover(function()

{

$(this).addClass('hover');

var $title = $sortOrder == 0 ? '升序' : '降序';

$(this).attr('title', '按'+ $(this).html() + $title +'排列');

}, function()

{

$(this).removeClass('hover');

}).click(function()

{

$sortOrder = $sortOrder == 0 ? 1 : 0;

var rows = $table.find('tbody tr').get();

$.each( rows, function( index, row )

{

row.sortKey = findSortKey($(row).children('td').eq(column));

});

//排序方法

rows.sort(function( a, b )

{

if( $sortOrder == 1 )

{

//升序

if(a.sortKey b.sortKey) return -1;

if(a.sortKey b.sortKey) return 1;

return 0;

}

else

{

//降序

if(a.sortKey b.sortKey) return 1;

if(a.sortKey b.sortKey) return -1;

return 0;

}

});

//排序后的對象添加給$table

$.each( rows, function( index, row )

{

$table.children('tbody').append(row);

row.sortKey = null;

});

//顯著標明是通過某一列排序的

$table.find('td').removeClass('sorted')

.filter(':nth-child('+ (column + 1) +')').addClass('sorted');

//重新賦予奇偶行的樣式

$table.alterRowColors();

});

}

});

//分頁效果

var currentPage = 0; //當前頁

var pageSize = 10; //每頁行數(shù)（不包括表頭）

//綁定分頁事件

$table.bind('repaginate', function()

{

$table.find('tbody tr').hide()

.slice(currentPage * pageSize, (currentPage + 1) * pageSize).show();

});

var numRows = $table.find('tbody tr').length; //記錄宗條數(shù)

var numPages = Math.ceil(numRows/pageSize); //總頁數(shù)

var $pager = $('div class="page"/div'); //分頁div

for( var page = 0; page numPages; page++ )

{

//為分頁標簽加上鏈接

$('a href="#" span'+ (page+1) +'/span/a')

.bind("click", { "newPage": page }, function(event)

{

currentPage = event.data["newPage"];

$table.trigger("repaginate");

})

.appendTo($pager);

$pager.append("??");

}

$pager.insertAfter($table); //分頁div插入table

$table.trigger("repaginate"); //初始化

});

當前名稱：jquery排序,jqgrid排序
文章出自：http://chinadenli.net/article35/dseicsi.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、用戶體驗、搜索引擎優(yōu)化、網(wǎng)站內(nèi)鏈、移動網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)