jquery uses sort to sort the DOM elements _jquery

Objective

The sort is more familiar to us, in a large number of applications there will be a scenario: when we get a list from the server, in the interface rendering, we can rely on a rule to sort, of course, most of the time to interact with the server to render the list to the client, This is not necessary, but in some cases, we do not need to use the framework and do not need to regenerate the list to the client, clearly can be done on the client, to achieve our goal, why send the request to the server again? Let's take a look at the following.

Topic

Let's first look at the JS sort method in the consortium.

<script type= "Text/javascript" >

var arr = new Array (6)
arr[0] = "George"
arr[1] = "John"
arr[2] = " Thomas "
arr[3] =" James "
arr[4] =" Adrew "
arr[5] =" Martin "

document.write (arr +" <br/> ")
document.write (Arr.sort ())

</script>

Result output:

George,john,thomas,james,adrew,martin
Adrew,george,james,john,martin,thomas

If the method is invoked without parameters, the elements in the array are sorted alphabetically, more precisely, sorted in the order of character encoding, but we can customize the collation.

We customize the sort function in the Sort method argument as follows:

<script type= "Text/javascript" >

function Sortnumber (a,b)
{return
a-b
}

var arr = new Array (6)
Arr[0] = "arr[1" = "
5"
arr[2] = "arr[3] =" "arr[4] ="
1000 "
arr[5] =" 1 "

DOCUMENT.WR ITE (arr + "<br/>")
document.write (Arr.sort (sortnumber))

</script>

The output is as follows:

10,5,40,25,1000,1
1,5,10,25,40,1000

As is the case in the world of the consortium, is the sort method so simple? Is there any practical use?

I can think of the actual scene: When rendering a list on a page, there may be a lot of content on the page, we need to scroll the mouse to see something else or say that the first few things we have seen, want to see other content, at this time we need to reverse the content of the page, how do we do?

Sorting DOM elements using the Sort method

First, let's look at the interface effect, as follows:

The list above is sorted by date, and there is a sort icon in the upper-right corner, and what we need to do is click on the sort icon to implement the list of ascending and descending transitions.

Since it's sort of the first thing we need to consider is to have a collation, we add a sort sequence number to implement the sort or reverse of the client list. Next we implement the reverse of the demo sort by asp.net mvc. Look at the View code:

 <div id= "Messagelist" >
 @{
  int count = 0;
  foreach (var m in Model)
  {
  count++;
  <div class= "Message-list-item" data-sort= "@count" >
   <div class= "main-content" >
   <div style= " margin-top:20px "><a href=" # ">@m.title</a></div>
   <div class=" Q_content ">
    < p>@m.body</p>
   </div>
   <div class= "q_answeroption style=" border-top:1px dotted #CCC; padding-bottom:5px;padding-top:5px; " >
    <div class= "lf" >
    </div>
    <div class= "Answer_author" >
    <a href= "#" class= "BlueLink" >@m.author</a>
    <span class= "V-split" >|</span>
    @m.postdate
    </div>
   </div>
   </div>
  </div>
  }
 }
 </div>

The above class= "Message-list-item" has an attribute data-sort that enables initialization sorting. This attribute is used to compare DOM element values, followed by the sort method. In fact, it is called jquery in the Sort method, and ultimately call JS in the Sort method. We need to reverse the list and we need the following steps.

(1) Define a global variable.

Why do you want to define a global variable? This variable is used to hold the status of the sort (ASC or DESC).

(2) Use jquery to select all the elements in the list.

(3) Run the Sort method in jquery for sorting.

(4) Re-attach the list to the parent node by detach the method.

The entire code is given below.

 <script type= "Text/javascript" >
 var sortthread = {};
 $ (function () {
  sortthread.sortascending = true;

  $ ("#ReverseOrder"). On ("click", Function () {
  sortthread.sortascending =!sortthread.sortascending;

  var $msgListItem = $ (". Message-list-item");

  $msgListItem. Sort (function (A, b) {
   var sort1 = a.getattribute (' Data-sort ') * 1;
   var sort2 = B.getattribute (' Data-sort ') * 1;

   var sortnum = 1;
   if (!sortthread.sortascending)
   sortnum =-1;

   if (Sort1 > Sort2) return
   1 * sortnum;
   if (Sort1 < SORT2)
   return-1 * sortnum;

   return 0;
  });

  $msgListItem. Detach (). Appendto ("#MessageList");

  }
 ); </script>

Let's demonstrate:

Of course the client uses sort not only to reverse, but also to sort, the following list of people information.

<ul class= "Peoplelist" >
 <li data-name= "John Doe" >mr John Doe</li> <li
 "Data-name=" Richardson ">MR. Trent richardson</li>
 <li data-name=" Cindy Smith "
 >ms Cindy <li data-name= "Bill Williams" >MR Bill williams</li>
 <li data-name= "Jane Doe" >mrs. Jane doe</ Li>
</ul>

Similarly get the above Data-name features to sort names.

Summarize

This section describes the sort method in jquery with a practical example. I am also in the process of looking at the data to see in the client sort of thinking, so to learn and share with you.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.