Computer >> कंप्यूटर >  >> प्रोग्रामिंग >> Javascript

जावास्क्रिप्ट का उपयोग करके HTML सूची को कैसे क्रमबद्ध करें?

<घंटा/>

जावास्क्रिप्ट का उपयोग करके एक 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>

आउटपुट

उपरोक्त कोड निम्न आउटपुट उत्पन्न करेगा -

जावास्क्रिप्ट का उपयोग करके HTML सूची को कैसे क्रमबद्ध करें?

"सॉर्ट करने के लिए क्लिक करें" बटन पर क्लिक करने पर -

जावास्क्रिप्ट का उपयोग करके HTML सूची को कैसे क्रमबद्ध करें?


  1. HTML फ़ाइल में JavaScript कैसे एम्बेड करें?

    HTML फ़ाइल में JavaScript एम्बेड करने के लिए निम्नलिखित कोड है - उदाहरण <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Documen

  1. मैं जावास्क्रिप्ट का उपयोग करके HTML में चाइल्ड नोड को कैसे हटा सकता हूं?

    जावास्क्रिप्ट का उपयोग करके HTML में चाइल्ड नोड को हटाने के लिए निम्नलिखित कोड है - उदाहरण दस्तावेज़ बॉडी { फॉन्ट-फ़ैमिली:सेगो यूआई, ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } .result {फ़ॉन्ट-आकार:20px; फ़ॉन्ट-वजन:500; }जावास्क्रिप्ट का उपयोग करके HTML में चाइल्ड नोड को हटानागायशेरबाघभैंस यहां क्लिक क

  1. जावास्क्रिप्ट का उपयोग करके उच्चारण वर्णों के साथ तारों को कैसे क्रमबद्ध करें?

    जावास्क्रिप्ट में उच्चारण वर्णों के साथ स्ट्रिंग्स को सॉर्ट करने के लिए कोड निम्नलिखित है - उदाहरण दस्तावेज़ बॉडी { फॉन्ट-फ़ैमिली:सेगो यूआई, ताहोमा, जिनेवा, वर्दाना, सेन्स-सेरिफ़; } .result,.sample {फ़ॉन्ट-आकार:18पीएक्स; फ़ॉन्ट-वजन:500; रंग:नीला बैंगनी}। नमूना {रंग:लाल; }उच्चारण वर्णों के साथ स्ट्रि