چگونه لیست را مرتب کنید

آموزش نحوه استفاده از JavaScript برای مرتب‌سازی لیست‌های HTML.

با کلیک بر روی این دکمه می‌توانید لیست را بر اساس ترتیب الفبایی مرتب کنید:

  • 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 sortList() {
  var list, i, switching, b, shouldSwitch;
  list = document.getElementById("id01");
  switching = true;
  /* یک چرخه ایجاد کنید که تا زمانی که آیتم‌های جابجایی وجود داشته باشد ادامه می‌یابد: */
  در حالی که (switching) {
    // ابتدا اعلام کنید: هیچ آیتمی برای جابجایی وجود ندارد
    switching = false;
    ب = لیست.getElementsByTagName("LI");
    // تمام موارد لیست را جستجو کنید:
    برای (i = 0; i < (ب.length - 1); i++) {
      // ابتدا اعلام کنید: آیتم فعلی و آیتم بعدی نباید جابجا شوند
      shouldSwitch = false;
      /* بررسی کنید که آیا باید جابجایی بین آیتم بعدی و آیتم فعلی انجام شود یا خیر: */
      اگر (ب [i].innerHTML.toLowerCase() > ب [i + 1].innerHTML.toLowerCase()) {
        /* اگر ترتیب حروف در مورد بعدی قبل از عنصر فعلی باشد، آن را به عنوان نیاز به تبادل مشخص کنید و از حلقه فعلی خارج شوید: */
        اگر (dir == "desc") {
        break;
      }
    }
    اگر (shouldSwitch) {
      /* اگر برچسب به عنوان نیاز به تبادل مشخص شده باشد، عملیات تبادل را انجام دهید و برچسب را به عنوان تبادل شده مشخص کنید: */
      ب [i].parentNode.insertBefore(b [i + 1], ب [i]);
      switching = true;
    }
  }
}
</script>

به طور مستقیم امتحان کنید

مرتب‌سازی صعودی و سقوطی

در اولین کلیک بر روی این دکمه، مرتب‌سازی به ترتیب صعودی (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";
  // یک حلقه ایجاد کنید که تا زمانی که هیچ عنصر برای تبادل وجود ندارد، ادامه می‌یابد:
  در حالی که (switching) {
    // ابتدا اعلام کنید: هیچ عنصر برای تبادل وجود ندارد:
    switching = false;
    ب = لیست.getElementsByTagName("LI");
    // تمام موارد لیست را جستجو کنید:
    برای (i = 0; i < (ب.length - 1); i++) {
      // ابتدا اعلام کنید: عنصر فعلی و مورد بعدی نباید تبادل شوند:
      shouldSwitch = false;
      /* بر اساس جهت مرتب‌سازی (صعودی یا نزولی) بررسی کنید که آیا مورد بعدی باید با مورد فعلی تبادل کند یا خیر: */
      اگر (dir == "asc") {
        اگر (ب [i].innerHTML.toLowerCase() > ب [i + 1].innerHTML.toLowerCase()) {
          /* اگر ترتیب حروف در مورد بعدی قبل از عنصر فعلی باشد، آن را به عنوان نیاز به تبادل مشخص کنید و از حلقه فعلی خارج شوید: */
          اگر (dir == "desc") {
          break;
        }
      }
        اگر (ب [i].innerHTML.toLowerCase() < ب [i + 1].innerHTML.toLowerCase()) {
          /* اگر ترتیب حروف در مورد بعدی پس از عنصر فعلی باشد، آن را به عنوان نیاز به تبادل مشخص کنید و از حلقه فعلی خارج شوید: */
          shouldSwitch = true;
          break;
        }
      }
    }
    اگر (shouldSwitch) {
      /* اگر برچسب به عنوان نیاز به تبادل مشخص شده باشد، عملیات تبادل را انجام دهید و برچسب را به عنوان تبادل شده مشخص کنید: */
      ب [i].parentNode.insertBefore(b [i + 1], ب [i]);
      switching = true;
      // هر بار که تبادل انجام می‌شود، switchcount افزایش می‌یابد:
      switchcount ++;
    }
      /* اگر هیچ تبادل انجام نشده و جهت "متناوب" باشد، جهت را به "پایین" تنظیم کنید و دوباره حلقه while را اجرا کنید. */
      اگر (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

به طور مستقیم امتحان کنید

لیست را بر اساس عدد مرتب کنید

مثال

اگر (عدد (ب [i].innerHTML) > عدد (ب [i + 1].innerHTML)) {
  shouldSwitch =  true;
  break;
}

به طور مستقیم امتحان کنید