jQuery は sort を使用して DOM 要素を並べ替えます-PHP开发-php.cn

jQuery は sort を使用して DOM 要素を並べ替えます

高洛峰

リリース： 2016-12-07 14:43:21

オリジナル

1613 人が閲覧しました

前書き

ほとんどのアプリケーションでは、サーバーからリストを取得してインターフェイスに表示するときに、並べ替えに使用される特定のルールに依存するシナリオがあります。もちろん、ほとんどの場合、クライアントにリストを再レンダリングするためにサーバーと再度対話します。これは悪い考えではありませんが、場合によっては、フレームワークを使用する必要も、クライアントにリストを再生成する必要もありません。クライアント側では、明らかにクライアント側で実行して目的を達成できますが、なぜサーバーにリクエストを再度送信する必要があるのでしょうか。以下を見てみましょう。

トピック

まずはw3cにおけるjsのsortメソッドを見てみましょう。

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

ログイン後にコピー

結果出力:

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

このメソッドを呼び出すときにパラメータが使用されない場合、配列内の要素は順番にソートされます。より正確には、文字エンコーディングの順にソートされますが、ソート規則をカスタマイズできます。

sort メソッドのパラメーターでソート関数を次のようにカスタマイズします:

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

ログイン後にコピー

出力は次のようになります:

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

上記は w3c での例です。ソート方法はそれほど簡単ですか?それが実際に役に立たないものは何でしょうか？

考えられる実際のシナリオ: ページ上にリストをレンダリングするとき、ページ上に多くのコンテンツがあり、他のコンテンツを表示するにはマウスをスクロールする必要があるか、最初のいくつかのコンテンツがすでに表示されている可能性があります。ページを開き、他のコンテンツを見たい場合、この時点でページのコンテンツを反転する必要があります。どうすればよいでしょうか?

sort メソッドを使用して DOM 要素を並べ替えます

上記のリストは、右上隅にある並べ替えアイコンをクリックして昇順と降順を切り替えることです。リスト。

ソートなので、最初に考慮する必要があるのは、ソート番号を追加することで、クライアントリストをソートまたは逆順にできるようにすることです。次に、ASP.NET MVC を使用して、並べ替えの反転を示します。ビューコードを見てください:

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

ログイン後にコピー

上記の class="message-list-item" には、初期ソートが実装される機能 data-sort があります。この機能は、DOM 要素の値を比較し、sort メソッドを使用して並べ替えるために使用されます。実際には、JQuery で sort メソッドを呼び出しているだけであり、最終的には js で sort メソッドを呼び出しています。リストを逆にする必要があります。それには次の手順が必要です。

(1) グローバル変数を定義します。

なぜグローバル変数を定義するのでしょうか?この変数は、ソート状態 (asc または desc) を保存するために使用されます。

(2) JQueryを使用してリスト内のすべての要素を選択します。

(3) JQueryでsortメソッドを実行して並べ替えます。

(4) detach メソッドでリストを親ノードに再アタッチします。

コード全体を以下に示します。

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

ログイン後にコピー

もちろん、クライアント側でsortを使用すると、単に反転するだけでなく、以下のような人事情報のリストのような並べ替えも可能です。

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

ログイン後にコピー

同様に、名前をソートするために上記のデータ名機能を取得します。