How to sort a list

Create sorting function

exempel

<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;
  /* Create a loop that will continue until there are no items to be swapped: */
  medan (switching) {
    // First declare: there is no item to be swapped
    switching = false;
    b = list.getElementsByTagName("LI");
    // Genomgå alla listelement:
    för (i = 0; i < (b.length - 1); i++) {
      // First declare: the current item and the next item should not be swapped
      shouldSwitch = false;
      /* Check if the next item should be swapped with the current item: */
      om (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Om det nästa elementets bokstavsordning kommer före det aktuella elementet, markera det för utbyte och hoppa ut ur den aktuella loopen: */
        shouldSwitch = true;
        break;
      }
    }
    om (shouldSwitch) {
      /* Om det är markerat att ett utbyte behöver göras, utför utbytesoperationen och markera att ett utbyte har skett: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Prova själv

Ascending and descending sort

When the button is clicked for the first time, the sort order is ascending (A to Z).

Again click, sort order is descending (Z to A):

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

exempel

<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;
  // Sätt sorteringsriktningen till stigande: 
  dir = "asc";
  // Skapa en loop som fortsätter tills det inte finns några element att utbyta:
  medan (switching) {
    // Först deklarera: det finns inga element att utbyta för närvarande:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Genomgå alla listelement:
    för (i = 0; i < (b.length - 1); i++) {
      // Först deklarera: aktuellt element och nästa element bör inte bytas plats:
      shouldSwitch = false;
      /* Kontrollera om det nästa elementet ska bytas plats med det aktuella elementet baserat på sorteringsriktningen (stigande eller fallande): */
      om (dir == "asc") {
        om (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Om det nästa elementets bokstavsordning kommer före det aktuella elementet, markera det för utbyte och hoppa ut ur den aktuella loopen: */
          shouldSwitch = true;
          break;
        }
      }
        om (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Om det nästa elementets bokstavsordning kommer efter det aktuella elementet, markera det för utbyte och hoppa ut ur den aktuella loopen: */
          shouldSwitch= true;
          break;
        }
      }
    }
    om (shouldSwitch) {
      /* Om det är markerat att ett utbyte behöver göras, utför utbytesoperationen och markera att ett utbyte har skett: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Öka switchcount med 1 varje gång ett utbyte görs:
      switchcount ++;
    }
      /* Om ingen utbyte har skett och riktningen är “stigande”, sätt riktningen till “fallande” och kör while-loopen igen. */
      om (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Prova själv

sortera listan med numer

exempel

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

Prova själv