কম্পিউটার টিউটোরিয়াল

JavaScript ব্যবহার করে HTML লিস্ট (ul/li) সর্ট করার পদ্ধতি


JavaScript ব্যবহার করে HTML লিস্ট সর্ট করার কোড নিচে দেওয়া হলো:

উদাহরণ

<!DOCTYPE html> <html> <body> <h1>Sorting list example</h1> <button>Click to sort</button> <ul class="animalList"> <li>Giraffe</li> <li>Camel</li> <li>Dog</li> <li>Lion</li> <li>Cheetah</li> <li>Cat</li> </ul> <script>    document .getElementsByTagName("button")[0] .addEventListener("click", sortList);    function sortList() {       var list, i, sortFlag, LiEle, sorted;       list = document.querySelector(".animalList");       sortFlag = true;       while (sortFlag) {          sortFlag = false;          LiEle = list.getElementsByTagName("LI");          for (i = 0; i < LiEle.length - 1; i++) {             sorted = false;             if ( LiEle[i].innerHTML.toLowerCase() > LiEle[i + 1].innerHTML.toLowerCase() ) {                sorted = true;                break;             }          }          if (sorted) {             LiEle[i].parentNode.insertBefore(LiEle[i + 1], LiEle[i]);             sortFlag = true;          }       }    } </script> </body> </html>

আউটপুট

উপরের কোড নিচের আউটপুট দেবে:

JavaScript ব্যবহার করে HTML লিস্ট (ul/li) সর্ট করার পদ্ধতি

"Click to sort" বাটনে ক্লিক করার পর:

JavaScript ব্যবহার করে HTML লিস্ট (ul/li) সর্ট করার পদ্ধতি

  1. JavaScript ব্যবহার করে HTML টেবিল সর্ট (Sort) করার পদ্ধতি

  2. HTML ফাইলে জাভাস্ক্রিপ্ট এম্বেড করার পদ্ধতি

  3. জাভাস্ক্রিপ্ট দিয়ে HTML চাইল্ড নোড রিমুভ করা

  4. জাভাস্ক্রিপ্টে একসেন্টযুক্ত ক্যারেক্টরের স্ট্রিং সর্ট করা