কিভাবে তালিকা ক্রমবিন্যাস করা হয়

জেইএসকিউ দ্বারা এইচটিএমএল তালিকা ক্রমবিন্যাস করার কিভাব শিখুন。

বুটনটি ক্লিক করলে, আক্ষরানুসারে তালিকা ক্রমবিন্যাস করা হবে:

  • 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;
  /* একটি লুপ তৈরী করুন যা আদান-প্রদান করতে হবে না পর্যন্ত চলবে: */
  while (switching) {
    // প্রথম ঘোষণা: এখন কোনও আদান-প্রদান করতে হয় না
    switching = false;
    b = list.getElementsByTagName("LI");
    // সমস্ত তালিকা আইটেমগুলি পরিদর্শন করুন:
    for (i = 0; i < (b.length - 1); i++) {
      // প্রথম ঘোষণা: বর্তমান আইটেম ও পরবর্তী আইটেম আদান-প্রদান করা উচিত নয়
      shouldSwitch = false;
      /* পরবর্তী আইটেমটি বর্তমান আইটেমের সাথে আদান-প্রদান করা উচিত কি না পরীক্ষা করুন: */
      /* যদি পরবর্তী আইটেমের অক্ষর ক্রম বর্তমান আইটেমের আগে, তবে বিনিময়ের জন্য ট্যাগ করে এবং বর্তমান লুপ ছেড়ে দিন: */
        shouldSwitch = true;
        else if (dir == "desc") {
        break;
      }
    }
    if (shouldSwitch) {
      /* যদি বিনিময়ের জন্য ট্যাগ করা হয়, তবে বিনিময় করে এবং বিনিময় হওয়ার ট্যাগ করুন: */
      b[i].parentNode.insertBefore(b[i + 1], b[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";
  // একটি লুপ তৈরি করুন যা কোনও বিনিময় করতে হয় না পর্যন্ত চলবে:
  while (switching) {
    // প্রথমে ঘোষণা করুন: বর্তমানে কোনও বিনিময় করতে হয় না:
    switching = false;
    b = list.getElementsByTagName("LI");
    // সমস্ত তালিকা আইটেমগুলি পরিদর্শন করুন:
    for (i = 0; i < (b.length - 1); i++) {
      // প্রথমে ঘোষণা করুন: বর্তমান আইটেম এবং পরবর্তী আইটেম বিনিময় করা উচিত নয়:
      shouldSwitch = false;
      /* সারিবের দিশা (বৃদ্ধি বা হ্রাস) অনুযায়ী পরবর্তী আইটেমটি বর্তমান আইটেমের সাথে বিনিময় করা উচিত কি না তা পরীক্ষা করুন: */
      if (dir == "asc") {
        /* যদি পরবর্তী আইটেমের অক্ষর ক্রম বর্তমান আইটেমের আগে, তবে বিনিময়ের জন্য ট্যাগ করে এবং বর্তমান লুপ ছেড়ে দিন: */
          shouldSwitch = true;
          else if (dir == "desc") {
          break;
        }
      }
        if (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* যদি পরবর্তী আইটেমের অক্ষর ক্রম বর্তমান আইটেমের পরে, তবে বিনিময়ের জন্য ট্যাগ করে এবং বর্তমান লুপ ছেড়ে দিন: */
          shouldSwitch= true;
          break;
        }
      }
    }
    if (shouldSwitch) {
      /* যদি বিনিময়ের জন্য ট্যাগ করা হয়, তবে বিনিময় করে এবং বিনিময় হওয়ার ট্যাগ করুন: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // প্রতিটি বিনিময়ের সময়, switchcount বৃদ্ধি করুন:
      switchcount ++;
    }
      /* যদি কোনও বিনিময় হয়নি এবং দিশা "বৃদ্ধি" হয়, তবে দিশা "হ্রাস" হিসাবে সেট করুন এবং while লুপ পুনরায় চালু করুন। */
      if (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

亲自试一试

সংখ্যার অনুযায়ী তালিকা সারিবের

প্রকল্প

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

亲自试一试