Paano i-sort ang listahan

Matututuhan kung paano i-sort ang listahan ng HTML gamit ang JavaScript.

Mag-click para i-sort ang listahan sa alpabetikal na pagkakasunod-sunod:

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

亲自试一试

Buuin ang function ng pag sort

halimbawa

<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;
  /* Buuin ang isang loop, na magpapatuloy hanggang walang dapat palitan na item: */
  while (switching) {
    // Mag-declare muna: walang dapat palitan na item sa kasalukuyan
    switching = false;
    b = list.getElementsByTagName("LI");
    // Suriin ang lahat ng item ng listahan:
    for (i = 0; i < (b.length - 1); i++) {
      // Mag-declare muna: ang kasalukuyang item at ang susunod na item ay hindi dapat palitan ng posisyon
      shouldSwitch = false;
      /* Check kung dapat palitan ang posisyon ng susunod na item sa kasalukuyang item: */
      kung (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Kung ang abugado ng susunod na item ay sa unahan ng kasalukuyang item, markahan na para sa pagpalitan at lumisan sa kasalukuyang loop: */
        kung (dir == "desc") {
        break;
      }
    }
    kung (shouldSwitch) {
      /* Kung na-markahan na para sa pagpalitan, isagawa ang pagpalitan at markahan na nangyari ang pagpalitan: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

亲自试一试

Pataas at pababa na pag sort

Sa unang pag-click sa button, ang direksyon ng pag sort ay pataas (A hanggang Z).

Muli-click, ang direksyon ng pag sort ay pababa (Z hanggang A):

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

halimbawa

<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;
  // i-set ang direksyon ng pagayos sa ascendendo: 
  dir = "asc";
  // lumikha ng isang loop na magpapatuloy hanggang walang dapat palitan:
  while (switching) {
    // Unang pahayag: Walang dapat palitan sa kasalukuyan:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Suriin ang lahat ng item ng listahan:
    for (i = 0; i < (b.length - 1); i++) {
      // Unang pahayag: Ang kasalukuyang item at ang susunod na item ay hindi dapat palitan sa posisyon:
      shouldSwitch = false;
      /* Suruhin ang susunod na item kung dapat palitan sa kasalukuyang item ayon sa direksyon ng pagayos (ascendendo o descendendo): */
      kung (dir == "asc") {
        kung (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Kung ang abugado ng susunod na item ay sa unahan ng kasalukuyang item, markahan na para sa pagpalitan at lumisan sa kasalukuyang loop: */
          kung (dir == "desc") {
          break;
        }
      }
        kung (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Kung ang abugado ng susunod na item ay sa likod ng kasalukuyang item, markahan na para sa pagpalitan at lumisan sa kasalukuyang loop: */
          shouldSwitch= true;
          break;
        }
      }
    }
    kung (shouldSwitch) {
      /* Kung na-markahan na para sa pagpalitan, isagawa ang pagpalitan at markahan na nangyari ang pagpalitan: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Pagbubukas: Bawasan ang switchcount bawat pagpalitan:
      switchcount ++;
    }
      /* Kung walang ginawang palitan at ang direksyon ay "ascendendo", ay i-set ang direksyon sa "descendendo" at muliin ang while loop. */
      kung (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

亲自试一试

ayusin ang listahan ayon sa numero

halimbawa

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

亲自试一试