jquery implementation of unordered table sorting function (with demo source download) _jquery

This article illustrates the ability of jquery to sort unordered tables. Share to everyone for your reference, specific as follows:

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= "Jquery-1.7.2.min.js" ></script>

Then, add the following sorting feature code:

<script language= "JavaScript" type= "Text/javascript" >
 $ (document). Ready (function () {
  var items = $ (". Orderobj Li "). Get all pending Li Mount array items
  items.sort (function (a,b)//Call JavaScript built-in function 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)
 //by traversing each array element, populating the unordered list
 {
   ul.append (LI);
 }
); </script>

The above code sorts by array and populates unordered lists so that list items are ordered. Concrete effect as shown:

Full instance code click here to download the site.

More interested readers of jquery-related content can view the site: A summary of jquery operations Dom node methods, a summary of jquery extension techniques, a summary of common plug-ins and usage in jquery, a summary of jquery drag-and-drop effects and tips, jquery tables ( Table) Summary of operational techniques, "Summary of Ajax usage in jquery", "jquery common Classic Effects Summary", "jquery animation and special effects usage Summary" and "jquery Selector usage Summary"

I hope this article will help you with the jquery program design.