Πώς να ταξινομήσετε λίστα

Δημιουργία συνάρτησης ταξινόμησης

παράδειγμα

<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;
  /* Δημιουργία ενός κύκλου που θα συνεχίζει μέχρι να μην υπάρχουν εγγραφές που πρέπει να ανταλλαγούν: */
  while (switching) {
    // Πρώτα δηλώστε: δεν υπάρχει εγγραφή που πρέπει να ανταλλαγεί
    switching = false;
    b = list.getElementsByTagName("LI");
    // Περιηγήστε όλες τις αντικειμενές λίστας:
    για (i = 0; i < (b.length - 1); i++) {
      // Πρώτα δηλώστε: η τρέχουσα εγγραφή δεν πρέπει να ανταλλαγεί με την επόμενη εγγραφή
      shouldSwitch = false;
      /* Ελέγχος αν η επόμενη εγγραφή πρέπει να ανταλλαγεί με την τρέχουσα εγγραφή: */
      αν (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* Αν η αλφαβητική σειρά της επόμενης αντικειμενής είναι πριν από την τρέχουσα αντικειμενή, σημαδέψτε ως να αντικατασταθεί και βγείτε από τον τρέχοντα γύρο: */
        αν (dir == "desc") {
        break;
      {}
    {}
    αν (shouldSwitch) {
      /* Αν έχει σημαδευτεί ως να αντικατασταθεί, εκτελέστε την αντικατάσταση και σημαδέψτε ότι έγινε αντικατάσταση: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
    {}
  {}
{}
</script>

Try it yourself

Ταξινόμηση αύξουσα και φθίνουσα

Η πρώτη κλικ στο κουμπί, η κατεύθυνση της ταξινόμησης είναι αύξουσα (A έως Z).

Επανεπιλογή, η κατεύθυνση της ταξινόμησης είναι φθίνουσα (Z έως A):

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

παράδειγμα

<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;
  // Ορίστε την κατεύθυνση της ταξινόμησης ως αύξηση: 
  dir = "asc";
  // Δημιουργήστε έναν γύρο που θα συνεχίζεται μέχρι να μην υπάρχουν αντικείμενα που χρειάζεται αντικατάσταση:
  while (switching) {
    // Πρώτα αναγνωρίστε: Δεν υπάρχει τρέχον αντικείμενο που χρειάζεται αντικατάσταση:
    switching = false;
    b = list.getElementsByTagName("LI");
    // Περιηγήστε όλες τις αντικειμενές λίστας:
    για (i = 0; i < (b.length - 1); i++) {
      // Πρώτα αναγνωρίστε: Το τρέχον αντικείμενο και το επόμενο αντικείμενο δεν πρέπει να αντικατασταθούν:
      shouldSwitch = false;
      /* Ελέγξτε αν η επόμενη αντικειμενή πρέπει να αντικατασταθεί με την τρέχουσα αντικειμενή ανάλογα με την κατεύθυνση της ταξινόμησης (αύξηση ή μείωση): */
      αν (dir == "asc") {
        αν (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* Αν η αλφαβητική σειρά της επόμενης αντικειμενής είναι πριν από την τρέχουσα αντικειμενή, σημαδέψτε ως να αντικατασταθεί και βγείτε από τον τρέχοντα γύρο: */
          αν (dir == "desc") {
          break;
        {}
      }
        αν (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* Αν η αλφαβητική σειρά της επόμενης αντικειμενής είναι μετά την τρέχουσα αντικειμενή, σημαδέψτε ως να αντικατασταθεί και βγείτε από τον τρέχοντα γύρο: */
          shouldSwitch = true;
          break;
        {}
      {}
    {}
    αν (shouldSwitch) {
      /* Αν έχει σημαδευτεί ως να αντικατασταθεί, εκτελέστε την αντικατάσταση και σημαδέψτε ότι έγινε αντικατάσταση: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // Καθετήρια αντικατάσταση, αυξήστε τον switchcount 1:
      switchcount++;
    }
      /* Αν δεν έγινε αντικατάσταση και η κατεύθυνση είναι "αύξηση", τότε ορίστε την κατεύθυνση ως "μείωση" και εκτελέστε ξανά τον γύρο του while. */
      αν (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      {}
    {}
  {}
{}
</script>

Try it yourself

ταξινόμηση λίστας με αριθμούς

παράδειγμα

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

Try it yourself