క్రమవర్ధమానం చేయడం ఎలా చేయాలి
జావాస్క్రిప్ట్ ద్వారా హైలైట్ లిస్ట్ క్రమవర్ధమానం నేర్చుకోండి.
బటన్ ను క్లిక్ చేయడం ద్వారా క్రమవర్ధమానం చేయండి విధంగా క్రమవర్ధమానం చేయండి:
- 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; }