JQuery supports sorting Unordered Lists (with demo source code download) and jquerydemo

JQuery supports sorting Unordered Lists (with demo source code download) and jquerydemo

This example describes how jQuery can sort Unordered Lists. We will share this with you for your reference. The details are as follows:

The principle of using jQuery to sort unordered lists is to obtain all list items in the unordered list and convert them into arrays. Then, use the JavaScript function to sort them and output them again. The jQuery functions used include ready (), get (), text (), each (), append (), and JavaScript sort ().

1. jQuery function Introduction

(1) jQuery function get () -- get Matching Element Set

This function is backward compatible with all matching elements (unlike jQuery objects, actually element arrays ). The syntax format is as follows:

Object. get ()

Note: This function is very useful if you want to directly operate DOM objects instead of jQuery objects.

(2) jQuery function text () -- get and set Element Content

This function obtains and sets the text content of matching elements. The syntax format is as follows:

Object. text ([val | fn])

Note: The val and fn parameters are optional. Val is the text content value of the element. The fn (index, text) function returns a string that accepts two parameters. index indicates the index position of the element in the Set, and text indicates the original text value.

(3) jQuery function append () -- append content to the element

This function adds content to each matching element. The syntax format is as follows:

Object. append (content | fn)

Note: This operation is similar to executing the appendChild method on the specified elements and adding them to the document. The content parameter indicates the content to be appended. fn (index, html) returns an HTML string to be appended to each matching element. Two parameters are accepted, the index parameter is the index value of the object in this set, and the html parameter is the original html value of this object.

2. Introduction to JavaScript Functions

JavaScript function sort ()-sort elements, used to sort array elements. The syntax format is as follows:

ArrayObject. sort ([sortby])

Note: sortby is optional. It specifies the sorting order, which must be a function. The returned value is the sorted array. If no parameters are used when you call this method, the elements in the array are sorted alphabetically. To be more precise, sort by character encoding. To achieve this, 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 returns a number indicating the relative sequence of the two values. The comparison function should have two parameters, a and B. The return value is as follows: if a is smaller than B, a should appear before B in the sorted array, then a value smaller than 0 is returned. If a is equal to B, 0 is returned. If a is greater than B, a value greater than 0 is returned.

3. function implementation

To sort unordered list items, follow these steps.

(1) obtain all list items and load them into an array.

(2) Sort array objects.

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

First, introduce the jQuery Library:

<script language="JavaScript" src="jquery-1.7.2.min.js"></script>

Then, add the following Sorting code:

<Script language = "JavaScript" type = "text/JavaScript"> $ (document ). ready (function () {var items = $ (". orderobj li "). get (); // obtain all the resources to be sorted. sort (function (a, B) // call the JavaScript built-in function sort {var elementone =$ (). 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, fill in the unordered list {ul. append (li) ;}); </script>

The above code sorts the list items by array and re-fills the unordered list. Effect

Click here to download the complete instance code.