Hoe een lijst sorteren

Maak een sorteerfunctie

voorbeeld

<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;
  /* Maak een lus die blijft lopen totdat er geen items meer moeten worden uitgewisseld: */
  while (switching) {
    // Eerst verklaren: er zijn geen items die moeten worden uitgewisseld
    switching = false;
    b = list.getElementsByTagName("LI");
    // Alle lijstitems doorlopen:
    for (i = 0; i < (b.length - 1); i++) {
      // Eerst verklaren: het huidige item en het volgende item moeten niet worden uitgewisseld
      shouldSwitch = false;
      /* Controleer of het volgende item moet worden uitgewisseld met het huidige item: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Als de lettervolgorde van het volgende item voor het huidige item komt, markeer het als ruilnodig en sla de huidige lus over: */
        else if (dir == "desc") {
        break;
      }
    }
    if (shouldSwitch) {
      /* Als het item gemarkeerd is voor ruil, voer dan de ruiloperatie uit en markeer het als geruild: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Try it yourself

Oplopend en aflopend sorteren

Wanneer je de knop voor het eerst klikt, is de sorteer richting oplopend (A naar Z).

Klik opnieuw, de sorteer richting is aflopend (Z naar A):

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

voorbeeld

<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;
  // Stel de sorteer richting in op oplopend: 
  dir = "asc";
  // Maak een lus die doorgaat totdat er geen ruilitems meer zijn:
  while (switching) {
    // Eerst verklaren: er zijn geen ruilitems nodig:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Alle lijstitems doorlopen:
    for (i = 0; i < (b.length - 1); i++) {
      // Eerst verklaren: het huidige item en het volgende item moeten niet worden geruild:
      shouldSwitch = false;
      /* Controleer op basis van de sorteer richting (oplopend of aflopend) of het volgende item met het huidige item moet worden geruild: */
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Als de lettervolgorde van het volgende item voor het huidige item komt, markeer het als ruilnodig en sla de huidige lus over: */
          else if (dir == "desc") {
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Als de lettervolgorde van het volgende item achter het huidige item komt, markeer het als ruilnodig en sla de huidige lus over: */
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Als het item gemarkeerd is voor ruil, voer dan de ruiloperatie uit en markeer het als geruild: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Elke keer dat er een ruil plaatsvindt, wordt switchcount verhoogd:
      switchcount++;
    }
      /* Als er geen ruil heeft plaatsgevonden en de richting "oplopend" is, stel dan de richting in op "aflopend" en voer de while-lus opnieuw uit. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Try it yourself

sorteer de lijst op nummer

voorbeeld

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

Try it yourself