క్రమవర్ధమానం చేయడం ఎలా చేయాలి

జావాస్క్రిప్ట్ ద్వారా హైలైట్ లిస్ట్ క్రమవర్ధమానం నేర్చుకోండి.

బటన్ ను క్లిక్ చేయడం ద్వారా క్రమవర్ధమానం చేయండి విధంగా క్రమవర్ధమానం చేయండి:

  • 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 = 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++) {
      // మొదటిగా ప్రకటించండి: ప్రస్తుత అంశం మరియు తదుపరి అంశం మార్పు చేయబడవు:
      /* క్రమపద్ధతి (అప్ ఆర్ లేదా డెస్క్ ఆర్) ప్రకారం తదుపరి అంశం ప్రస్తుత అంశంతో మార్పు చేయాలా కాదు కాదు తనిఖీ చేయండి: */
      if (dir == "asc") {
      if (b[i].innerHTML.toLowerCase() > b[i + 1].innerHTML.toLowerCase()) {
        /* తదుపరి అంశం అక్షరక్రమం ప్రస్తుత అంశం ముందు ఉన్నప్పుడు, మార్పును గుర్తించండి మరియు ప్రస్తుత లుప్పును బయటపడండి: */
          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 పెంచండి 1:
      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;
}

亲自试一试