Wie listet man eine Liste auf

Erstellen Sie eine Sortierfunktion

Beispiel

<ul id="id01">
  <li>Oslo</li>
  <li>Stockholm</li>
  <li>Helsinki</li>
  <li>Berlin</li>
  <li>Rome</li>
  <li>Madrid</li>
</ul>
<script>
function sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* Erstellen Sie einen Zyklus, der fortgesetzt wird, bis keine Elemente mehr vertauscht werden müssen: */
  while (switching) {
    // Erklärung: Es gibt keine Elemente, die vertauscht werden müssen
    switching = false;
    b = list.getElementsByTagName("LI");
    // Alle Listeinträge durchlaufen:
    for (i = 0; i < (b.length - 1); i++) {
      // Erklärung: Das aktuelle Element und das nächste Element sollten nicht vertauscht werden
      shouldSwitch = false;
      /* Überprüfen Sie, ob das nächste Element mit dem aktuellen Element vertauscht werden sollte: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Wenn das Alphabet der nächsten Zeile vor dem aktuellen Element folgt, wird es als zu tauschen markiert und der aktuelle Zyklus wird verlassen: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Wenn ein Umtausch markiert wurde, wird der Umtauschvorgang ausgeführt und ein Umtausch wird markiert: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Versuchen Sie es selbst

Sortierung in aufsteigender und absteigender Reihenfolge

Wenn Sie die Schaltfläche zum ersten Mal klicken, ist die Sortierreihenfolge in aufsteigender Reihenfolge (A bis Z).

Klicken Sie erneut, um die Sortierreihenfolge in absteigender Reihenfolge (Z bis A) zu ändern:

• Oslo
• Stockholm
• Helsinki
• Berlin
• Rome
• Madrid

Beispiel

<ul id="id01">
  <li>Oslo</li>
  <li>Stockholm</li>
  <li>Helsinki</li>
  <li>Berlin</li>
  <li>Rome</li>
  <li>Madrid</li>
</ul>
<script>
function sortListDir() {
  var list, i, switching, b, shouldSwitch, dir, switchcount = 0;
  list = document.getElementById("id01");
  switching = true;
  // Setzt die Sortierungsrichtung auf aufsteigend: 
  dir = "asc";
  // Erzeugt einen Zyklus, der bis zu dem Punkt fortgesetzt wird, an dem es keine zu tauschenden Elemente mehr gibt:
  while (switching) {
    // Zunächst erklären: Es gibt derzeit keine zu tauschenden Elemente:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Alle Listeinträge durchlaufen:
    for (i = 0; i < (b.length - 1); i++) {
      // Zunächst erklären: Das aktuelle Element und das nächste Element sollten nicht vertauscht werden:
      shouldSwitch = false;
      /* Überprüft nach der Sortierungsrichtung (aufsteigend oder absteigend), ob das nächste Element mit dem aktuellen Element vertauscht werden sollte: */
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Wenn das Alphabet der nächsten Zeile vor dem aktuellen Element folgt, wird es als zu tauschen markiert und der aktuelle Zyklus wird verlassen: */
          shouldSwitch = true;
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Wenn das Alphabet der nächsten Zeile nach dem aktuellen Element folgt, wird es als zu tauschen markiert und der aktuelle Zyklus wird verlassen: */
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Wenn ein Umtausch markiert wurde, wird der Umtauschvorgang ausgeführt und ein Umtausch wird markiert: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Jedes Mal, wenn ein Umtausch vorgenommen wird, wird switchcount um 1 erhöht:
      switchcount++;
    } else {
      /* Wenn keine Umtauschvorgänge stattgefunden haben und die Richtung "aufsteigend" ist, wird die Richtung auf "absteigend" gesetzt und der while-Zyklus wird erneut ausgeführt. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Versuchen Sie es selbst

Liste nach Nummer sortieren

Beispiel

if (Number(b[i].innerHTML) > Number(b[i + 1].innerHTML)) {
  shouldSwitch =  true;
  break;
}

Versuchen Sie es selbst