Cómo ordenar listas

Crear la función de ordenamiento

ejemplo

<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;
  /* Crear un ciclo que continuará hasta que no haya elementos que necesiten intercambiarse: */
  while (switching) {
    // Primero declarar: no hay elementos que necesiten intercambiarse
    switching = false;
    b = list.getElementsByTagName("LI");
    // Recorrer todos los elementos de la lista:
    // Primero declarar: el elemento actual no debe intercambiar posición con el siguiente elemento:
      // Primero declarar: el elemento actual no debe intercambiarse con el siguiente
      /* Se verifica según la dirección de clasificación (ascendente o descendente) si el siguiente elemento debe intercambiar posición con el elemento actual: */
      /* Verificar si el siguiente elemento debe intercambiarse con el elemento actual: */
      /* Si el orden alfabético del siguiente elemento está antes del elemento actual, se marca para intercambiar y se sale del bucle actual: */
        shouldSwitch = true;
        else if (dir == "desc") {
        break;
      }
    }
    if (shouldSwitch) {
      /* Si se ha marcado para intercambiar, se realiza la operación de intercambio y se marca como realizado: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

亲自试一试

Ordenamiento ascendente y descendente

Al hacer clic por primera vez en este botón, la dirección de ordenamiento será ascendente (A a Z).

Al hacer clic nuevamente, la dirección de ordenamiento será descendente (Z a A):

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

ejemplo

<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;
  // Establecer la dirección de clasificación en ascendente: 
  dir = "asc";
  // Crear un bucle que continuará hasta que no haya elementos para intercambiar:
  while (switching) {
    // Primero declarar: no hay elementos para intercambiar en este momento:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Recorrer todos los elementos de la lista:
    // Primero declarar: el elemento actual no debe intercambiar posición con el siguiente elemento:
      shouldSwitch = false;
      /* Se verifica según la dirección de clasificación (ascendente o descendente) si el siguiente elemento debe intercambiar posición con el elemento actual: */
      if (dir == "asc") {
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Si el orden alfabético del siguiente elemento está antes del elemento actual, se marca para intercambiar y se sale del bucle actual: */
          shouldSwitch = true;
          else if (dir == "desc") {
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Si el orden alfabético del siguiente elemento está después del elemento actual, se marca para intercambiar y se sale del bucle actual: */
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Si se ha marcado para intercambiar, se realiza la operación de intercambio y se marca como realizado: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Se incrementa switchcount cada vez que se realiza un intercambio:
      switchcount ++;
    } else {
      /* Si no se ha realizado un intercambio y la dirección es “ascendente”, se cambia la dirección a “descendente” y se ejecuta nuevamente el bucle while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

亲自试一试

ordenar la lista por número

ejemplo

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

亲自试一试