Como classificar listas

Criar função de classificação

exemplo

<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;
  /* Criar um loop que continuará até que não haja mais itens a serem trocados: */
  while (switching) {
    // Primeiro declare: não há itens a serem trocados de posição no momento
    switching = false;
    b = list.getElementsByTagName("LI");
    // Percorre todos os itens da lista:
    // Primeiro declare: o item atual não deve ser trocado com o próximo:
      // Primeiro declare: o item atual não deve ser trocado de posição com o próximo item
      /* Verifica, com base na direção de ordenação (ascendente ou descendente), se o próximo item deve ser trocado com o atual: */
      /* Verificar se o próximo item deve ser trocado de posição com o item atual: */
      /* Se a ordem alfabética do próximo item estiver antes da do item atual, marca para troca e sai do loop atual: */
        shouldSwitch = true;
        else if (dir == "desc") {
        break;
      }
    }
    if (shouldSwitch) {
      /* Se marcado para troca, realiza a troca e marca como trocado: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Experimente você mesmo

Classificação ascendente e descendente

Quando clicar no botão pela primeira vez, a ordem de classificação será ascendente (A para Z).

Clique novamente para ordenar em ordem decrescente (Z para A):

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

exemplo

<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;
  // Define a direção de ordenação como ascendente: 
  dir = "asc";
  // Cria um loop que continuará até que não haja itens para troca:
  while (switching) {
    // Primeiro declare: não há itens para troca no momento:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Percorre todos os itens da lista:
    // Primeiro declare: o item atual não deve ser trocado com o próximo:
      shouldSwitch = false;
      /* Verifica, com base na direção de ordenação (ascendente ou descendente), se o próximo item deve ser trocado com o atual: */
      if (dir == "asc") {
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Se a ordem alfabética do próximo item estiver antes da do item atual, marca para troca e sai do loop atual: */
          shouldSwitch = true;
          else if (dir == "desc") {
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Se a ordem alfabética do próximo item estiver após a do item atual, marca para troca e sai do loop atual: */
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Se marcado para troca, realiza a troca e marca como trocado: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Aumenta o switchcount a cada troca:
      switchcount ++;
    }
      /* Se não houve troca e a direção é “ascendente”, muda a direção para “descendente” e executa novamente o loop while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Experimente você mesmo

ordena a lista por número

exemplo

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

Experimente você mesmo