JQueryはsortを用いてDOM要素をソートする

ソートはよく知られていますが、ほとんどのアプリケーションでは、サーバ側からリストを取得すると、インタフェース上でレンダリングを行い、ルールに依存してソートすることができます.もちろん、ほとんどの場合、サーバとインタラクティブにリストをクライアントに再レンダリングします.これはいけないことではありませんが、フレームワークを利用する必要もクライアントにリストを再生成する必要もありません.クライアントで行うことができるのに、私たちの目的を達成するために、なぜもう一度サーバに要求を送信するのでしょうか.次に見てみましょう.
話題
まず,w 3 cにおけるjsのsort法を見る.

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

結果出力:

George,John,Thomas,James,Adrew,Martin
Adrew,George,James,John,Martin,Thomas

このメソッドを呼び出すときにパラメータを使用しない場合は、配列内の要素をアルファベット順にソートします.より正確に言えば、文字符号化順にソートしますが、ソートルールをカスタマイズできます.
sortメソッドパラメータでソート関数をカスタマイズします.次のようにします.

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

出力は次のとおりです.

10,5,40,25,1000,11,5,10,25,40,1000

上記のようにw 3 cの例では、sortメソッドはこのように簡単ではないでしょうか.実際の用途は何ですか.
私が考えることができる実際のシーン:ページにリストをレンダリングするとき、ページの内容が多いかもしれません.マウスをスクロールして他の内容を見る必要があります.あるいは、ページの前のいくつかの内容を見たことがあります.他の内容を見たいです.このとき、ページの内容を反転する必要があります.どうすればいいですか.
sort法によるDOM要素のソート
まず、インタフェースの効果を見てみましょう.
上記のリストは日付でソートされ、右上隅にソートアイコンがあり、このソートアイコンをクリックしてリストの昇順と降順の切り替えを実現する必要があります.
ソートである以上、まずソートルールを考慮する必要があります.ソートシーケンス番号を追加すると、クライアントリストでのソートまたは反転を実現できます.次にASP.NET MVCは、プレゼンテーションsortの反転を実現する.ビューコードを見てください.

  

        @{            int count = 0;
            foreach (var m in Model)
            {                count++;                

                    

                        
@m.title
                        

                            
@m.body
                        
                        

                            

                            
                            

                                @m.author
                                |
                                @m.postDate                            
                        
                    
                
            }
        }    

上記class=「message-list-item」には、初期化されたソートを実現するプロパティdata-sortがあります.この特性はDOM要素値の比較に用いられ,sort法を用いて並べ替えられる.実はJQueryのsortメソッドを呼び出し、最終的にはjsのsortメソッドを呼び出すだけです.リストを反転するには、次の手順に従います.
(1)グローバル変数を定義します.
グローバル変数を定義する理由この変数は、ソートのステータス(asc or desc)を保存するために使用されます.
(2)リスト内のすべての要素をJQueryで選択する.
(3)JQueryでsortメソッドを実行してソートする.
(4)detachメソッドによりリストattachを親ノードに再配置する.
コード全体を次に示します.

              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");

            });
        });    

以下に説明します.
もちろんクライアントでsortを利用するのは反転だけでなく,以下のユーザ情報リストのようにソートすることもできる.
    

Mr. John Doe

    

Mr. Trent Richardson

    

Ms. Cindy Smith

    

Mr. Bill Williams

    

Mrs. Jane Doe

同様に,上記data−name特性を取得して人名ソートを行う.