Sortiere eine HTML-Liste mit Javascript

Dies ist wahrscheinlich der schnellste Weg, dies zu tun, da jQuery nicht verwendet wird:

Rufen Sie die Funktion wie folgt auf:

Sie können andere Listen auf die gleiche Weise sortieren, und wenn Sie andere Elemente auf der gleichen Seite mit der Listenklasse haben, sollten Sie Ihrem UL eine ID geben und sie stattdessen übergeben.

Beispiel JSFiddle

Bearbeiten

Da Sie erwähnt haben, dass Sie wollen, dass es auf pageLoad passiert, nehme ich an, dass es so schnell wie möglich passieren soll, nachdem die ul im DOM ist, was bedeutet, dass Sie die Funktion sortList zum Kopf Ihrer Seite hinzufügen und verwenden sollten Es ist sofort nach deiner Liste so:

Sie können dieses leichtgewichtige jquery-Plug-in List.js verwenden,

1. es ist leicht [nur 3K Skript]
2. einfach in Ihrer vorhandenen HTML-Tabelle mit der Klasse
zu implementieren
3. suchbar, sortierbar und filterbar

HTML

JavaScript

Sie können dies versuchen

Live-Beispiel: Ссылка

Dieser Code sortiert die Liste unter der Annahme, dass nur ein .list -Element vorhanden ist:

Sie können sehen, dass es hier funktioniert: Ссылка

Um zu erklären, wie es funktioniert:

1. Es wird das .list-Elternobjekt erhalten.
2. Es findet alle <li> untergeordneten Objekte.
3. Er entfernt alle untergeordneten Objekte <li> aus dem DOM, behält jedoch ihre Daten bei
4. Es sortiert die li-Objekte mit einer benutzerdefinierten Sortierfunktion
5. Die benutzerdefinierte Sortierfunktion ruft den HTML-Code im li-Tag ab und konvertiert ihn in eine Zahl
6. Dann wird jedes li-Tag, nachdem es das Array in der neu sortierten Reihenfolge durchlaufen hat, an das ursprüngliche übergeordnete Element angefügt.

Das Ergebnis ist, dass sie in sortierter Reihenfolge angezeigt werden.

Bearbeiten:

Diese verbesserte Version wird sogar mehrere Listenobjekte gleichzeitig sortieren:

Demo: Ссылка

So etwas sollte helfen:

Eine Methode könnte sein, ein Array zu sortieren (na ja, ein jQuery-Objekt) der li -Elemente und ersetzen Sie den Inhalt (mit der html -Methode) von ul mit dem sortierten Array von Elementen:

Hier ist ein funktionierendes Beispiel .

Sie können diese Methode verwenden:

Überprüfen Sie den Artikel hier: Ссылка

Bearbeiten: Es gibt ein sehr cooles jquery-Plugin, das Folgendes tut: Ссылка

Verwenden von jQuery für Hilfe:

Fiddle Link

Sortiere die jQuery-Sammlung als normales Array und füge dann jedes Element in der richtigen Reihenfolge zurück.

Ссылка