فہرست کو کیسے ترتیب دینا ہے

یہاں تک سیکھ کریں کہ آپ 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") {
        بریک;
      }
    }
    اگر (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") {
          بریک;
        }
      }
        اگر (ب [i].innerHTML.toLowerCase() < ب [i + 1].innerHTML.toLowerCase()) {
          /* اگر ترتیب حروف بعدی در ترتیب حروف فعلی بعد است، آن را برای تبادل برچسب‌گذاری کنید و از حلقه فعلی خارج شوید: */
          shouldSwitch = true;
          بریک;
        }
      }
    }
    اگر (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 =  حقیقی;
  بریک;
}

خود کو چھپا دیئے