利用jQuery對無序列表排序的原理是：獲取到無序列表中的所有列表項，并轉成數組形式，使用JavaScript函數對其進行排序后再次輸出。其中使用到的jQuery函數有ready()、get()、text()、each()、append()和JavaScript函數sort()。

1．jQuery函數介紹

（1）jQuery函數get()——獲取匹配元素集合 該函數取得所有匹配元素的一種向后兼容的方式（不同于jQuery對象，實際上是元素數組）。其語法形式如下：

object.get()

復制代碼 注：如果你想要直接操作DOM對象而不是jQuery對象，這個函數非常有用。 （2）jQuery函數text()——獲取和設置元素內容 該函數獲取和設置匹配元素的文本內容。其語法形式如下：

object.text([val|fn])

復制代碼 注：val和fn參數可選。val是設置元素的文本內容值；fn(index,text)函數返回一個字符串，接受兩個參數，index為元素在集合中的索引位置，text為原先的text值。 （3）jQuery函數append()——向元素追加內容 該函數向每個匹配的元素內部追加內容。其語法形式如下：

object.append(content|fn)

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

2．JavaScript函數介紹

JavaScript函數sort()——元素排序，用于對數組元素進行排序。其語法形式如下：

arrayObject.sort([sortby])

復制代碼 注：sortby可選，規定排列順序，必須是函數。返回值為排序后的數組本身。如果調用該方法時沒有使用參數，將按字母順序對數組中的元素進行排序。說得更精確點，是按照字符編碼的順序進行排序。要實現這一點，首先應把數組的元素都轉換成字符串（如有必要），以便進行比較。 如果想按照其他標準進行排序，就需要提供比較函數，該函數要比較兩個值，然后返回一個用于說明這兩個值的相對順序的數字。比較函數應該具有兩個參數a和b，其返回值如下：若a小于b，在排序后的數組中a應該出現在b之前，則返回一個小于0的值。若a等于b，則返回0。若a大于b，則返回一個大于0的值。

3．功能實現

實現無序列表項排序功能的步驟如下。 （1）獲取所有的列表項，并將其裝入數組。 （2）對數組對象進行排序。 （3）將排好序的數組重新填充到無序列表中。 首先，把jQuery庫引入進來：

<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裝入數組items

? ? items.sort(function(a,b)? ?? ?? ?? ?? ? //調用JavaScript內置函數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)? ?? ???

? ?? ?? ?? ?? ? //通過遍歷每一個數組元素，填充無序列表

? ?{

? ? ? ?ul.append(li);

? ? });

?});

</script>

復制代碼 以上代碼通過數組排序并重新填充無序列表使得列表項有序。具體效果如圖4.11所示。

?

<ignore_js_op>

轉載于:https://www.cnblogs.com/hongbolee2013/archive/2013/03/29/2988666.html

總結

以上是生活随笔為你收集整理的利用jQuery对无序列表排序 http://www.apkbus.com/android-80639-1-1.html的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。