Using jQuery to sort an unordered list

The example in this article describes how jQuery implements the sorting function of unordered lists. Share it with everyone for your reference, the details are as follows:

The principle of using jQuery to sort the unordered list is: get all the list items in the unordered list and convert them into array form, Use JavaScriptFunction Sort it and output it again. The jQuery functions used include ready(), get(),

text(), each(), append() and JavaScript function sort().

1. jQuery function introduction
(1)jQuery function get()--get the set of matching elements
This function obtains all matching elements in a backward-compatible way (different from jQueryobject, actually an array of elements). Its syntax 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()--Getting and setting element content

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

object.text([val|fn])

Note: The val and fn parameters are optional. val is to set the text content value of the element; the fn(index, text) function returns a string , accepting two parameters, index is the index position of the element in the collection, and text is The original text value.

(3) jQuery function append()--Append content to elements

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

object.append(content|fn)

Note: This operation is similar to executing the appendChild method on specified elements and adding them to the document. The content parameter represents the appended content; fn(index,html) returns an HTML string for appending to each matching element. It accepts two parameters. The index parameter is the index value of the object in this collection, and the html parameter is this The original html value of the object.

2. JavaScript function introduction

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

arrayObject.sort([sortby])

Note: sortby is optional, specifies the sorting order, and must be a function. The return value is the sorted array itself. If this method is called without arguments, the elements in the array will be sorted alphabetically. To be more precise, it is sorted according to the order of character encoding. To achieve this, the elements of the array should first be converted to strings (if necessary) for comparison.

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

3. Functional implementation

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

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

(2) Sort array objects.

(3) Repopulate 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 function code:

<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>

The above code is sorted by the array And repopulate the unordered list so that the list items are in order. The specific effect is as shown in the figure:

The above is the detailed content of Using jQuery to sort an unordered list. For more information, please follow other related articles on the PHP Chinese website!