Using jquery to sort unordered lists

Using jquery to sort unordered lists

The principle of ordering unordered lists with jquery is to get all list items in a sequence table, and to go to an array of them, sort them by using a JavaScript function, and then output again. The jquery functions used there are ready (), get (), text (), each (), append (), and JavaScript function sort ().

1. Introduction to jquery Functions

(1) jquery function get ()--Getting matching element collection

This function obtains a backward-compatible way for all matching elements (unlike jquery objects, which are actually array of elements). Its grammatical form is as follows:

Object.get ()

Note: This function is useful if you want to manipulate DOM objects directly instead of jquery objects.

(2) jquery function text ()--get and set element content

This function gets and sets the text content of the matching element. Its grammatical form is as follows:

Object.text ([VAL|FN])

Note: The Val and FN parameters are optional. Val is the text content value of the set element; the FN (index,text) function returns a string that accepts two arguments, index is the indexed position of the element in the collection, and text is the original text value.

(3) jquery function append ()--Append content to Element

This function appends content to each matching element. Its grammatical form is as follows:

Object.append (CONTENT|FN)

Note: This action is similar to executing the AppendChild method on the specified elements and adding them to the document. The content parameter represents the appended contents; FN (index,html) returns an HTML string that is appended to each matching element, accepts two parameters, the index parameter is the indexed value of the object in this collection, and the HTML parameter is the original HTML value of the object.

2. Introduction to JavaScript functions

JavaScript function sort ()--element ordering, which is used to sort the array elements. Its grammatical form is as follows:

Arrayobject.sort ([SortBy])

Note: SortBy optional, specified order, must be a function. The returned value is the sorted array itself. If you call the method without using parameters, the elements in the array are sorted alphabetically. To be more precise, sorting is done in the order of character encoding. To do this, you should first convert the elements of the array into strings (if necessary) for comparison.

If you want to sort by other criteria, you need to provide a comparison function that compares two values, and then returns a number that describes the relative order of the two values. The comparison function should have two parameters A and B, and the return value would be as follows: If A is less than B, a value less than 0 is returned before a in the sorted array, and a should appear before B. If a equals B, it returns 0. If a is greater than B, a value greater than 0 is returned.

3. function realization

The steps to implement unordered list item sorting function are as follows.

(1) Gets all the list items and loads them into an array.

(2) Sorting array objects.

(3) Repopulate the sorted array into the unordered list.

First, bring in the jquery library:

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

Then, add the complete code:

1 <script language= "JavaScript"  type= "Text/javascript" >  2 $ (document). Ready ( function () {  3   var items = $ (". Orderobj li"). Get ();     //get all pending sort Li loaded array items   4   items.sort (function (a,b)                  //call JavaScript built-in function sort   5    {  6       var elementone = $ (a). text ();   7        var elementtwo = $ (b). text ();   8       if (elementone < elementtwo)  return -1;     9       if (elementone > elementtwo)  return  1;   10      return 0;   11  });     13&NBSP;&NBSP;VAR&NBSP;UL&NBSP;=&Nbsp;$ (". Orderobj");   14  $.each (items,function (i,li)                          //fills the unordered list   15  by traversing each array element  {  16      ul.append (LI);   17  });   18 });   19 </script> 

The above code sorts by array and populates unordered lists so that list items are ordered. The concrete effect is shown in Figure 4.11.

Figure 4.11 Unordered list item sorting

Original: http://book.51cto.com/art/201207/350481.htm