सूची को क्रमवार करना कैसे?

HTML सूची को JavaScript के द्वारा क्रमवार करने के लिए सीखें。

इस बटन पर क्लिक करके सूची को अक्षराक्षर क्रम में क्रमवार करें:

  • 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;
      /* अगला आइटम इस आइटम के साथ विनिमय करना चाहिए क्या जाँचें: */
      यदि (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* यदि अगले आइटम का अक्षरक्रम वर्तमान आइटम से पहले है, तो विनिमय करने के लिए चिह्नित करें और वर्तमान लूप से बाहर निकलें: */
        यदि (dir == "desc") {
        break;
      }
    }
    यदि (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;
      /* विनिमय करने के लिए अगले आइटम को वर्तमान आइटम से क्या करना है, यदि विनिमय की दिशा (उठाने या अवरोध) है: */
      यदि (dir == "asc") {
        यदि (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
          /* यदि अगले आइटम का अक्षरक्रम वर्तमान आइटम से पहले है, तो विनिमय करने के लिए चिह्नित करें और वर्तमान लूप से बाहर निकलें: */
          यदि (dir == "desc") {
          break;
        }
      }
        यदि (b[i].innerHTML.toLowerCase() < b[i + 1].innerHTML.toLowerCase()) {
          /* यदि अगले आइटम का अक्षरक्रम वर्तमान आइटम के बाद है, तो विनिमय करने के लिए चिह्नित करें और वर्तमान लूप से बाहर निकलें: */
          shouldSwitch= true;
          break;
        }
      }
    }
    यदि (shouldSwitch) {
      /* यदि विनिमय करने के लिए चिह्नित किया गया है, तो विनिमय क्रिया करें और विनिमय किया गया चिह्न लगाएं: */
      b[i].parentNode.insertBefore(b[i + 1], b[i]);
      switching = true;
      // हर विनिमय के दौरान, switchcount बढ़ाया जाएगा 1:
      switchcount ++;
    }
      /* यदि कोई विनिमय नहीं हुआ है और दिशा "उठाने" है, तो दिशा को "अवरोध" को सेट करें और फिर एक बार और while लूप चलाएं। */
      यदि (switchcount == 0 && dir == "asc") {
        dir = "desc";
        switching = true;
      }
    }
  }
}
</script>

अपने आप प्रयास करें

सूची को नंबर के अनुसार क्रमबद्ध करें

उदाहरण

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

अपने आप प्रयास करें