JavaScript से HTML लिस्ट कैसे सॉर्ट करें?

HTML लिस्ट (UL/OL) को JavaScript से सॉर्ट करना

JavaScript का उपयोग करके HTML लिस्ट को वर्णानुक्रम में सॉर्ट करने का कोड:

उदाहरण

<!DOCTYPE html>
<html>
<body>
  <h1>लिस्ट सॉर्टिंग उदाहरण</h1>
  <button>क्लिक करके सॉर्ट करें</button>
  <ul class="animalList">
    <li>जिराफ</li>
    <li>ऊंट</li>
    <li>कुत्ता</li>
    <li>शेर</li>
    <li>चीता</li>
    <li>बिल्ली</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>

आउटपुट

• प्रारंभ में: जिराफ, ऊंट, कुत्ता, शेर, चीता, बिल्ली
• "क्लिक करके सॉर्ट करें" क्लिक करने पर: ऊंट, चीता, बिल्ली, जिराफ, कुत्ता, शेर (A-Z)

आधुनिक सरल दृष्टिकोण

function sortListModern(listSelector) {
  const list = document.querySelector(listSelector);
  const items = Array.from(list.querySelectorAll('li'));
  
  items.sort((a, b) => 
    a.textContent.trim().localeCompare(b.textContent.trim(), undefined, { sensitivity: 'base' })
  );
  
  items.forEach(item => list.appendChild(item));
}

// उपयोग
document.querySelector('button').addEventListener('click', () => sortListModern('.animalList'));

मुख्य अंतर: टेबल vs लिस्ट

सर्वोत्तम अभ्यास

• localeCompare उपयोग करें सही यूनिकोड सॉर्टिंग के लिए
• textContent प्राथमिकता दें innerHTML पर (सुरक्षित, तेज़)
• Array.sort + appendChild DOM ऑपरेशन्स कम करता है
• डेटा विशेषताओं (data-sort-value) से कस्टम सॉर्ट कुंजी सक्षम करें