Felix Riesterer: Listen <li> sortieren?

Beitrag lesen

Lieber Linuchs,

PLZ    | Ort                              | Events
A-1010 | Wien                             | 5
D-25541| Brunsbüttel (Schleswig-Holstein) | 111

Tabelle! Jehova!

sind nun die Zeilen einer Position (sehr verkürztes Beispiel)

D-25541
Brunsbüttel (Schleswig-Holstein)
111

Ein Datensatz, dargestellt in schon wieder einer Tabelle! Diese ist dieses Mal nur senkrecht organisiert und die Bezeichner für die Bedeutung der Zeilen fehlt:

Schlüssel Wert
PLZ D-25541
Ort Brunsbüttel (Schleswig-Holstein)
ID 111

Damit Du Deine Listenpunkte (lies: Tabellenzeilen aka Datensätze) sortieren kannst, müssen deren Datenelemente in eigene Container verpackt sein (erinnere Dich an die <td>-Elemente):

<ul>
  <li>
    <span data-rel="zip">D-25541</span>
    <span data-rel="place">Brunsbüttel (Schleswig-Holstein)</span>
    <span data-rel="key">111</span>
  <li>
</ul>

Von mir aus kannst Du auf die data-rel-Attribute verzichten, sie sollten nur die Bedeutung des jeweiligen Elements veranschaulichen. Natürlich willst Du diese Elemente in CSS mit display:block; haben, damit sie wirklich untereinander dargestellt werden.

Dein JavaScript muss nun eben schauen, welche <span>-Elemente so ein Listenpunkt hat, um dann danach zu sortieren. Das <ul> entspricht wie schon erwähnt dem <tbody>, das <li> dem <tr> und das <span> dem <td>.

Du darfst anstelle von span gerne auch ein anderes Element verwenden. Dabei kommt alles infrage, was irgendwie einen Sinn hat: p (bringt schon display:block; von Hause aus mit), samp (eigentlich seltsam), var (eigentlich abwegig) ... b/i/u...

Liebe Grüße

Felix Riesterer