jQuery uses sort to sort DOM elements

Foreword

We are all familiar with sorting. In most applications, there will be such a scenario: when we get a list from the server and render it on the interface, we may rely on a certain Rules are used to sort. Of course, most of them will interact with the server again to re-render the list to the client. This is not a bad idea, but in some cases, we neither need to use the framework nor regenerate the list to the client. On the client side, we can obviously do it on the client side and achieve our purpose. Why do we need to send the request to the server again? Let’s take a look below.

Topic

Let’s first look at the sort method of js in w3c.

<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 no parameters are used when calling this method, it will be alphabetically The elements in the array are sorted sequentially. To be more precise, they are sorted in the order of character encoding, but we can customize the sorting rules.

We customize the sorting function in the sort method parameter, as follows:

<script type="text/javascript">
 
function sortNumber(a,b)
{
return a - b
}
 
var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"
 
document.write(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

The above is an example in w3c. Is the sort method that simple? What practical use does it not have?

Actual scenarios I can think of: When rendering a list on a page, there may be a lot of content on the page, and we need to scroll the mouse to see other content. Or we have already seen the first few content on the page and want to see other content. Content, at this time we need to reverse the page content, how should we do it?

Use the sort method to sort DOM elements

The above list is sorted by date. There is a sorting icon in the upper right corner. What we need to achieve is to click the sorting icon to switch between ascending and descending order of the list.

Since it is sorting, the first thing we need to consider is to have a sorting rule. By adding a sorting number, we can sort or reverse the client list. Next, we use ASP.NET MVC to demonstrate the inversion of sort. 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 a feature data-sort, through which initial sorting is implemented. This feature will be used to compare DOM element values, and then use the sort method to sort. In fact, it is just calling the sort method in JQuery, and ultimately calling the sort method in js. We need to reverse the list, which requires the following steps.

(1) Define a global variable.

Why define global variables? This variable is used to save the sorting status (asc or desc).

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

(3) Run the sort method in JQuery to sort.

(4) Reattach the list to the parent node through the detach 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(&#39;data-sort&#39;) * 1;
  var sort2 = b.getAttribute(&#39;data-sort&#39;) * 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>

Of course, using sort on the client side is not only reversal, but also sorting, such as the following list of personnel information.

<ul class="peopleList">
 <li data-name="John Doe">Mr. John Doe</li>
 <li data-name="Trent Richardson">Mr. Trent Richardson</li>
 <li data-name="Cindy Smith">Ms. Cindy Smith</li>
 <li data-name="Bill Williams">Mr. Bill Williams</li>
 <li data-name="Jane Doe">Mrs. Jane Doe</li>
</ul>

Similarly, obtain the above data-name feature to sort the names.