Cách sắp xếp danh sách

Tạo hàm sắp xếp

thực hành

<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;
  /* Tạo một vòng lặp, vòng lặp này sẽ tiếp tục cho đến khi không còn phần tử nào cần trao đổi: */
  while (switching) {
    // Đầu tiên tuyên bố: không có phần tử nào cần trao đổi
    switching = false;
    b = list.getElementsByTagName("LI");
    // Duyệt qua tất cả các phần tử danh sách:
    for (i = 0; i < (b.length - 1); i++) {
      // Đầu tiên tuyên bố: phần tử hiện tại và phần tử tiếp theo không nên trao đổi vị trí
      shouldSwitch = false;
      /* Kiểm tra phần tử tiếp theo có nên trao đổi vị trí với phần tử hiện tại hay không: */
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Nếu thứ tự字母 của phần tử tiếp theo trước phần tử hiện tại, thì đánh dấu cần chuyển đổi và thoát khỏi vòng lặp hiện tại: */
        shouldSwitch = true;
        break;
      }
    }
    if (shouldSwitch) {
      /* Nếu đã đánh dấu cần chuyển đổi, thì thực hiện thao tác chuyển đổi và đánh dấu đã thực hiện chuyển đổi: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    }
  }
}
</script>

Thử ngay

Sắp xếp tăng và giảm dần

Lần nhấn đầu tiên của nút này, hướng sắp xếp sẽ là tăng dần (A đến Z).

Nhấn lại, hướng sắp xếp sẽ là giảm dần (Z đến A):

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

thực hành

<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;
  // Đặt hướng sắp xếp thành tăng dần: 
  dir = "asc";
  // Tạo một vòng lặp sẽ tiếp tục cho đến khi không còn phần tử nào cần chuyển đổi:
  while (switching) {
    // Đầu tiên khai báo: hiện tại không có phần tử nào cần chuyển đổi:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Duyệt qua tất cả các phần tử danh sách:
    for (i = 0; i < (b.length - 1); i++) {
      // Đầu tiên khai báo: phần tử hiện tại và phần tử tiếp theo không nên trao đổi vị trí:
      shouldSwitch = false;
      /* Kiểm tra phần tử tiếp theo có nên trao đổi vị trí với phần tử hiện tại dựa trên hướng sắp xếp (tăng dần hoặc giảm dần): */
      if (dir == "asc") {
        if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Nếu thứ tự字母 của phần tử tiếp theo trước phần tử hiện tại, thì đánh dấu cần chuyển đổi và thoát khỏi vòng lặp hiện tại: */
          shouldSwitch = true;
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Nếu thứ tự字母 của phần tử tiếp theo sau phần tử hiện tại, thì đánh dấu cần chuyển đổi và thoát khỏi vòng lặp hiện tại: */
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* Nếu đã đánh dấu cần chuyển đổi, thì thực hiện thao tác chuyển đổi và đánh dấu đã thực hiện chuyển đổi: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Mỗi lần thực hiện chuyển đổi, switchcount tăng 1:
      switchcount ++;
    }
      /* Nếu không có sự chuyển đổi và hướng là “tăng dần”, thì đặt hướng thành “giảm dần” và chạy lại vòng lặp while. */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

Thử ngay

sắp xếp danh sách theo số

thực hành

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

Thử ngay