Listeyi nasıl sıralayabilirim

Sıralama fonksiyonu oluşturma

örnek

<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;
  /* Bir döngü oluşturun, bu döngü takas edilmesi gereken bir madde olmadıkça devam eder: */
  while (switching) {
    // Öncelikle beyan edin: şu anda takas edilmesi gereken bir madde yok
    switching = false;
    b = list.getElementsByTagName("LI");
    // Tüm listeleme öğelerini dolaşın:
    for (i = 0; i < (b.length - 1); i++) {
      // Öncelikle beyan edin: mevcut madde ile bir sonraki madde takas edilmemelidir
      shouldSwitch = false;
      /* Bir sonraki madde, mevcut madde ile takas edilmeli mi kontrol et: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Eğer bir sonraki öğenin harf sırası mevcut öğenin öncesinde ise, değişim yapılması gerektiği olarak işaretleyin ve mevcut döngüden çıkın: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Eğer değişim yapılması gerektiği işaretlenmişse, değişim işlemini gerçekleştirin ve değişim yapıldı olarak işaretleyin: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Kişisel olarak deneyin

Artan ve azalan sıralama

Bu düğmeye ilk tıklama yapıldığında, sıralama yönü artan (A'dan Z'ye) olur.

Yeniden tıklama, sıralama yönü azalan (Z'den A'ya):

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

örnek

<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ıralama yönelimini yüksel olarak ayarlayın: 
  dir = "asc";
  // Değişim yapılması gereken bir öğe olmadıkça süren bir döngü oluşturun:
  while (switching) {
    // Öncelikle beyan edelim: şu anda değişim yapılması gereken bir öğe yok:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Tüm listeleme öğelerini dolaşın:
    for (i = 0; i < (b.length - 1); i++) {
      // Öncelikle beyan edelim: mevcut öğe ile bir sonraki öğe değişim yapmamalıdır:
      shouldSwitch = false;
      /* Sıralama yönelimini (yüksel veya azal) dikkate alarak, bir sonraki öğenin mevcut öğe ile değişim yapması gerekip gerekmediğini kontrol edin: */
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Eğer bir sonraki öğenin harf sırası mevcut öğenin öncesinde ise, değişim yapılması gerektiği olarak işaretleyin ve mevcut döngüden çıkın: */
          shouldSwitch = true;
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Eğer bir sonraki öğenin harf sırası mevcut öğenin ardından ise, değişim yapılması gerektiği olarak işaretleyin ve mevcut döngüden çıkın: */
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Eğer değişim yapılması gerektiği işaretlenmişse, değişim işlemini gerçekleştirin ve değişim yapıldı olarak işaretleyin: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Her değişim yapıldığında, switchcount 1 artırılır:
      switchcount ++;
    }
      /* Eğer değişim yapılmadıysa ve yönelim 'yüksel' ise, yönelimi 'azal' olarak ayarlayın ve tekrar while döngüsünü çalıştırın. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Kişisel olarak deneyin

listenin sayısal sıralamasını yapın

örnek

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

Kişisel olarak deneyin