jQuery verwendet sort, um DOM-Elemente zu sortieren

Vorwort

Sortieren ist für uns sehr vertraut. In den meisten Anwendungen gibt es eine solche Szene: Wenn wir eine Liste vom Server erhalten, rendern wir sie auf der Schnittstelle Natürlich werden die meisten von ihnen erneut mit dem Server interagieren, um die Liste an den Client erneut zu rendern. In einigen Fällen ist dies jedoch nicht erforderlich Es ist nicht erforderlich, die Liste für den Client neu zu generieren. Dies kann auf dem Client erfolgen, um unseren Zweck zu erreichen. Schauen wir uns unten um.

Thema

Sehen wir uns zunächst die Sortiermethode von js in w3c an.

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

Ergebnisausgabe:

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

Wenn beim Aufruf dieser Methode keine Parameter verwendet werden, werden die Elemente im Array alphabetisch sortiert. Genauer gesagt werden sie in der Reihenfolge der Zeichenkodierung sortiert. Aber wir können die Sortierregeln anpassen.

Wir passen die Sortierfunktion im Sortiermethodenparameter wie folgt an:

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

Die Ausgabe ist wie folgt:

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

Das Obige ist ein Beispiel in w3c einfach? Welchen praktischen Nutzen hat es nicht?

Tatsächliche Szenarien, die mir einfallen: Beim Rendern einer Liste auf einer Seite befindet sich möglicherweise viel Inhalt auf der Seite, und wir müssen mit der Maus scrollen, um andere Inhalte anzuzeigen, oder wir haben den Inhalt bereits gesehen Wenn wir andere Inhalte sehen möchten, müssen wir den Seiteninhalt umkehren.

Verwenden Sie die Sortiermethode, um DOM-Elemente zu sortieren.

Die obige Liste ist nach Datum sortiert. In der oberen rechten Ecke müssen wir auf die Sortierung klicken Symbol, um eine aufsteigende Reihenfolge der Liste zu erreichen, und umschalten auf „Absteigend“.

Da es sich um eine Sortierung handelt, müssen wir zunächst eine Sortierregel berücksichtigen, indem wir eine Sortiernummer hinzufügen, um die Kundenliste zu sortieren oder umzukehren. Als Nächstes verwenden wir ASP.NET MVC, um die Sortierumkehr zu demonstrieren. Schauen Sie sich den Ansichtscode an:

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

Die obige Klasse="message-list-item" verfügt über eine Funktion zur Datensortierung, durch die die Initialisierung implementiert wird Sortieren. Diese Funktion wird verwendet, um DOM-Elementwerte zu vergleichen und anschließend mit der Sortiermethode zu sortieren. Tatsächlich ruft es lediglich die Sortiermethode in JQuery auf und ruft letztendlich die Sortiermethode in js auf. Wir müssen die Liste umkehren, was die folgenden Schritte erfordert.

(1) Definieren Sie eine globale Variable.

Warum globale Variablen definieren? Diese Variable wird zum Speichern des Sortierstatus (aufsteigend oder absteigend) verwendet.

(2) Verwenden Sie JQuery, um alle Elemente in der Liste auszuwählen.

(3) Führen Sie zum Sortieren die Sortiermethode in JQuery aus.

(4) Hängen Sie die Liste über die Trennmethode erneut an den übergeordneten Knoten an.

Der gesamte Code ist unten angegeben.

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

Natürlich ist die Verwendung von sort auf der Clientseite nicht nur eine Umkehrung, sondern auch eine Sortierung, wie in der folgenden Personalinformationsliste gezeigt.

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

In ähnlicher Weise können Sie die obige Datennamenfunktion nutzen, um die Namen zu sortieren.