Using jquery to sort unordered lists

Source: Internet
Author: User
Tags jquery library

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.