Verwenden von jQuery zum Sortieren einer ungeordneten Liste

Das Beispiel in diesem Artikel beschreibt, wie jQuery die Sortierfunktion ungeordneter Listen implementiert. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Das Prinzip der Verwendung von jQuery zum Sortieren der ungeordneten Liste besteht darin, alle Listenelemente in der ungeordneten Liste abzurufen und sie in ein Array Formular, JavaScript verwendenFunktion, um es zu sortieren und erneut auszugeben. Zu den verwendeten jQuery-Funktionen gehören ready(), get(),

text(), every(), append() und die JavaScript-Funktion sort().

1. Einführung in jQuery-Funktionen (1) jQuery-Funktion get() – den Satz übereinstimmender Elemente abrufen
Diese Funktion ist eine abwärtskompatible Methode zum Abrufen aller übereinstimmenden Elemente (anders als jQuery
Objekt). , eigentlich ein Array von Elementen). Die Syntax lautet wie folgt: object.get()

Hinweis: Diese Funktion ist sehr nützlich, wenn Sie das
DOM-Objekt anstelle des jQuery-Objekts direkt bedienen möchten.
(2) jQuery-Funktion text() – ruft den Inhalt des Elements ab und legt ihn fest

Diese Funktion ruft den Textinhalt des passenden Elements ab und legt ihn fest. Die Syntax lautet wie folgt:

object.text([val|fn])

Hinweis: Die Parameter val und fn sind optional. val dient zum Festlegen des Textinhaltswerts des Elements. Die Funktion fn(index, text) gibt einen
-String zurück, der zwei Parameter akzeptiert. Index ist die -Indexposition des Elements Sammlung und Text ist der ursprüngliche Textwert.
(3) jQuery-Funktion append() – Inhalt an Elemente anhängen

Diese Funktion hängt Inhalt an jedes passende Element an. Die Syntax lautet wie folgt:

object.append(content|fn)

Hinweis: Dieser Vorgang ähnelt dem Ausführen der appendChild-Methode für angegebene Elemente und dem Hinzufügen dieser zum Dokument. Der Parameter „content“ stellt den angehängten Inhalt dar; fn (index, html) gibt einen HTML-String zum Anhängen an jedes passende Element zurück. Der Parameter „index“ ist der Indexwert des Objekts in dieser Sammlung, und der Parameter „html“ ist dieser Der ursprüngliche HTML-Wert des Objekts.


2. Einführung in JavaScript-Funktionen
JavaScript-Funktion sort() – Elementsortierung, die zum Sortieren von Array-Elementen verwendet wird. Die Syntax lautet wie folgt:

arrayObject.sort([sortby])

Hinweis: sortby ist optional, gibt die Sortierreihenfolge an und muss eine Funktion sein. Der Rückgabewert ist das sortierte Array selbst. Wenn diese Methode ohne Argumente aufgerufen wird, werden die Elemente im Array alphabetisch sortiert. Genauer gesagt wird nach der Reihenfolge der Zeichenkodierung sortiert. Um dies zu erreichen, sollten die Elemente des Arrays zunächst zum Vergleich in Strings umgewandelt werden (falls erforderlich).

Wenn Sie nach anderen Kriterien sortieren möchten, müssen Sie eine Vergleichsfunktion bereitstellen, die zwei Werte vergleicht und eine Zahl zurückgibt, die die relative Reihenfolge der beiden Werte beschreibt. Die Vergleichsfunktion sollte zwei Parameter a und b haben und ihr Rückgabewert lautet wie folgt: Wenn a kleiner als b ist, sollte a vor b im sortierten Array erscheinen, dann wird ein Wert kleiner als 0 zurückgegeben. Wenn a gleich b ist, wird 0 zurückgegeben. Wenn a größer als b ist, wird ein Wert größer 0 zurückgegeben.


3． Funktionale Implementierung
Die Schritte zum Implementieren der Sortierfunktion für ungeordnete Listenelemente sind wie folgt.

(1) Holen Sie sich alle Listenelemente und laden Sie sie in ein Array.

(2) Array-Objekte sortieren.

(3) Füllen Sie das sortierte Array erneut in die ungeordnete Liste ein.

Stellen Sie zunächst die jQuery-Bibliothek vor:

<script language="JavaScript" src="jquery-1.7.2.min.js"></script>

Fügen Sie dann den folgenden Sortierfunktionscode hinzu:

<script language="JavaScript" type="text/JavaScript">
 $(document).ready(function(){
  var items = $(".orderobj li").get(); //获取所有待排序li装入数组items
  items.sort(function(a,b) //调用JavaScript内置函数sort
  {
    var elementone = $(a).text();
    var elementtwo = $(b).text();
    if(elementone < elementtwo) return -1;
    if(elementone > elementtwo) return 1;
   return 0;
 });
 var ul = $(".orderobj");
 $.each(items,function(i,li)
 //通过遍历每一个数组元素，填充无序列表
 {
   ul.append(li);
 });
 });
</script>

Der obige Code wird übergeben

Array-Sortierung und füllen Sie die ungeordnete Liste neu, damit die Listenelemente in der richtigen Reihenfolge sind. Der spezifische Effekt ist in der Abbildung dargestellt:

Das obige ist der detaillierte Inhalt vonVerwenden von jQuery zum Sortieren einer ungeordneten Liste. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!