利用jQuery對(duì)無(wú)序列表排序的原理是：獲取到無(wú)序列表中的所有列表項(xiàng)，并轉(zhuǎn)成數(shù)組形式，使用JavaScript函數(shù)對(duì)其進(jìn)行排序后再次輸出。其中使用到的jQuery函數(shù)有ready()、get()、text()、each()、append()和JavaScript函數(shù)sort()。

1．jQuery函數(shù)介紹

（1）jQuery函數(shù)get()--獲取匹配元素集合

該函數(shù)取得所有匹配元素的一種向后兼容的方式（不同于jQuery對(duì)象，實(shí)際上是元素?cái)?shù)組）。其語(yǔ)法形式如下：

object.get()

注：如果你想要直接操作DOM對(duì)象而不是jQuery對(duì)象，這個(gè)函數(shù)非常有用。

（2）jQuery函數(shù)text()--獲取和設(shè)置元素內(nèi)容

該函數(shù)獲取和設(shè)置匹配元素的文本內(nèi)容。其語(yǔ)法形式如下：

object.text([val|fn])

注：val和fn參數(shù)可選。val是設(shè)置元素的文本內(nèi)容值；fn(index,text)函數(shù)返回一個(gè)字符串，接受兩個(gè)參數(shù)，index為元素在集合中的索引位置，text為原先的text值。

（3）jQuery函數(shù)append()--向元素追加內(nèi)容

該函數(shù)向每個(gè)匹配的元素內(nèi)部追加內(nèi)容。其語(yǔ)法形式如下：

object.append(content|fn)

注：這個(gè)操作與對(duì)指定的元素執(zhí)行appendChild方法并將它們添加到文檔中的情況類(lèi)似。content參數(shù)表示追加的內(nèi)容；fn(index,html)返回一個(gè)HTML字符串，用于追加到每一個(gè)匹配元素內(nèi)部，接受兩個(gè)參數(shù)，index參數(shù)為對(duì)象在這個(gè)集合中的索引值，html參數(shù)為這個(gè)對(duì)象原先的html值。

2．JavaScript函數(shù)介紹

JavaScript函數(shù)sort()--元素排序，用于對(duì)數(shù)組元素進(jìn)行排序。其語(yǔ)法形式如下：

arrayObject.sort([sortby])

注：sortby可選，規(guī)定排列順序，必須是函數(shù)。返回值為排序后的數(shù)組本身。如果調(diào)用該方法時(shí)沒(méi)有使用參數(shù)，將按字母順序?qū)?shù)組中的元素進(jìn)行排序。說(shuō)得更精確點(diǎn)，是按照字符編碼的順序進(jìn)行排序。要實(shí)現(xiàn)這一點(diǎn)，首先應(yīng)把數(shù)組的元素都轉(zhuǎn)換成字符串（如有必要），以便進(jìn)行比較。

如果想按照其他標(biāo)準(zhǔn)進(jìn)行排序，就需要提供比較函數(shù)，該函數(shù)要比較兩個(gè)值，然后返回一個(gè)用于說(shuō)明這兩個(gè)值的相對(duì)順序的數(shù)字。比較函數(shù)應(yīng)該具有兩個(gè)參數(shù)a和b，其返回值如下：若a小于b，在排序后的數(shù)組中a應(yīng)該出現(xiàn)在b之前，則返回一個(gè)小于0的值。若a等于b，則返回0。若a大于b，則返回一個(gè)大于0的值。

3．功能實(shí)現(xiàn)

實(shí)現(xiàn)無(wú)序列表項(xiàng)排序功能的步驟如下。

（1）獲取所有的列表項(xiàng)，并將其裝入數(shù)組。

（2）對(duì)數(shù)組對(duì)象進(jìn)行排序。

（3）將排好序的數(shù)組重新填充到無(wú)序列表中。

首先，把jQuery庫(kù)引入進(jìn)來(lái)：

<script language="JavaScript" src="jslib/jquery-1.6.js"></script>

然后，添加完整代碼：

 <script language="JavaScript" type="text/JavaScript"> 
 $(document).ready(function(){ 
  var items = $(".orderobj li").get();  //獲取所有待排序li裝入數(shù)組items 
  items.sort(function(a,b)        //調(diào)用JavaScript內(nèi)置函數(shù)sort 
  { 
    var elementone = $(a).text(); 
    var elementtwo = $(b).text(); 
    if(elementone < elementtwo) return -1;  
    if(elementone > elementtwo) return 1; 
   return 0; 
 }); 
 
 var ul = $(".orderobj"); 
 $.each(items,function(i,li)    
        //通過(guò)遍歷每一個(gè)數(shù)組元素，填充無(wú)序列表 
 { 
   ul.append(li); 
 }); 
 }); 
 </script> 

以上代碼通過(guò)數(shù)組排序并重新填充無(wú)序列表使得列表項(xiàng)有序。

具體效果如圖4.11所示。

以上就是小編為大家?guī)?lái)的利用jQuery對(duì)無(wú)序列表排序的簡(jiǎn)單方法全部?jī)?nèi)容了，希望大家多多支持腳本之家~

最新評(píng)論