Come ordinare un elenco

Creare la funzione di sorting

Esempio

<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;
  /* Crea un ciclo che continuerà fino a che non ci sono elementi da scambiare: */
  while (switching) {
    // Prima dichiarazione: non ci sono elementi da scambiare
    switching = false;
    b = list.getElementsByTagName("LI");
    // Eseguire una scansione di tutti gli elementi dell'elenco:
    // Prima di tutto: l'elemento corrente e il successivo non dovrebbero scambiarsi posizione:
      // Prima dichiarazione: l'elemento corrente e il successivo non dovrebbero essere scambiati
      /* Controlla se il successivo dovrebbe essere scambiato con l'attuale in base alla direzione di ordinamento (ascendente o discendente): */
      /* Verifica se il prossimo elemento dovrebbe essere scambiato con l'elemento corrente: */
      /* Se l'ordine alfabetico dell'elemento successivo è prima dell'elemento corrente, contrassegnarlo per lo scambio e uscire dal ciclo corrente: */
        shouldSwitch = true;
        else if (dir == "desc") {
        break;
      }
    }
    if (shouldSwitch) {
      /* Se è stato contrassegnato per lo scambio, eseguire l'operazione di scambio e contrassegnare che è stato effettuato uno scambio: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Prova personalmente

Sorting in ordine crescente e decrescente

Quando si clicca per la prima volta, l'ordine di sorting è crescente (A a Z).

Di nuovo cliccato, l'ordine di sorting è decrescente (Z a A):

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

Esempio

<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;
  // Impostare la direzione di ordinamento su ascendente: 
  dir = "asc";
  // Creare un ciclo che continuerà fino a che non ci sono più elementi da scambiare:
  while (switching) {
    // Prima di tutto: non ci sono elementi da scambiare al momento:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Eseguire una scansione di tutti gli elementi dell'elenco:
    // Prima di tutto: l'elemento corrente e il successivo non dovrebbero scambiarsi posizione:
      shouldSwitch = false;
      /* Controlla se il successivo dovrebbe essere scambiato con l'attuale in base alla direzione di ordinamento (ascendente o discendente): */
      if (dir == "asc") {
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Se l'ordine alfabetico dell'elemento successivo è prima dell'elemento corrente, contrassegnarlo per lo scambio e uscire dal ciclo corrente: */
          shouldSwitch = true;
          else if (dir == "desc") {
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Se l'ordine alfabetico dell'elemento successivo è dopo l'elemento corrente, contrassegnarlo per lo scambio e uscire dal ciclo corrente: */
          shouldSwitch = true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Se è stato contrassegnato per lo scambio, eseguire l'operazione di scambio e contrassegnare che è stato effettuato uno scambio: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Incrementa switchcount ogni volta che si effettua uno scambio:
      switchcount++;
    }
      /* Se non è stato effettuato uno scambio e la direzione è “ascendente”, impostare la direzione su “discendente” e eseguire di nuovo il ciclo while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Prova personalmente

Ordina l'elenco per numero

Esempio

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

Prova personalmente