दिलचस्प पोस्ट
वीएस2012 के लिए क्रिस्टल रिपोर्ट – वीएस2013 – वीएस2015 – वीएस2017 मिश्रित शब्द-संख्या-संख्या स्ट्रिंग्स की मानवताबद्ध या प्राकृतिक संख्या छँटाई कैसे जांचने के लिए कि एक जेएसन कुंजी मौजूद है? एसक्यूएल क्वेरी – यूनियन में आदेश का उपयोग करना अतिप्रवाह सामग्री के साथ एक फ्लेक्सबॉक्स स्क्रोल करना ओपनएसएसएल का उपयोग क्या करता है "यादृच्छिक राज्य" लिखने में असमर्थ है? बुनियादी HTML दृश्य प्रस्तुत करना है? आप अपनी प्राथमिक कुंजी कैसे पसंद करते हैं? PHP फ़ंक्शन कॉल क्यों * * महंगे हैं? MediaButtonIntentReceiver एंड्रॉइड 4.0+ में काम नहीं कर रहा है अपाचे स्थानीयहोस्ट / ~ उपयोगकर्ता नाम / काम नहीं कर रहा है नई लाइन बिना एक फ़ाइल पढ़ना IE8 और फ़ायरफ़ॉक्स में एलेमेंट? दो प्रकारों के बीच सबसे अच्छा फिट करने के लिए न्यूनतम संवेदक प्रकार कैसे प्राप्त करें? Pickle.dump – TypeError का प्रयोग करना: स्ट्रेट होना चाहिए, बाइट्स नहीं

जावास्क्रिप्ट के साथ एक HTML सूची को सॉर्ट करें

मेरे पास तीन सूची आइटम्स का एक सेट है जो मैं पृष्ठ लोड पर स्वचालित रूप से उच्च से कम प्रदर्शित करना चाहूंगा। आदर्श रूप से jquery या javascript का उपयोग कर।

<ul class="list"> <li id="alpha">32</li> <li id="beta">170</li> <li id="delta">28</li> </ul> 

प्रत्येक सूची आइटम को अपनी आईडी की आवश्यकता है क्योंकि उनके पास प्रत्येक व्यक्तिगत पृष्ठभूमि चित्र हैं संख्याओं को नोड्स में पाठ करना चाहिए ताकि एक उपयोगकर्ता उन्हें संपादित कर सके।

Solutions Collecting From Web of "जावास्क्रिप्ट के साथ एक HTML सूची को सॉर्ट करें"

शायद यह करने का सबसे तेज़ तरीका होगा, क्योंकि यह jQuery का उपयोग नहीं करता है:

 function sortList(ul){ var new_ul = ul.cloneNode(false); // Add all lis to an array var lis = []; for(var i = ul.childNodes.length; i--;){ if(ul.childNodes[i].nodeName === 'LI') lis.push(ul.childNodes[i]); } // Sort the lis in descending order lis.sort(function(a, b){ return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10); }); // Add them into the ul in order for(var i = 0; i < lis.length; i++) new_ul.appendChild(lis[i]); ul.parentNode.replaceChild(new_ul, ul); } 

जैसे फ़ंक्शन कॉल करें:

 sortList(document.getElementsByClassName('list')[0]); 

आप अन्य सूचियों को उसी तरह सॉर्ट कर सकते हैं, और अगर आपके पास सूची श्रेणी के साथ एक ही पृष्ठ पर अन्य तत्व हैं तो आपको अपने आईडी को एक आईडी देना चाहिए और इसका उपयोग करने के बजाय उसे पास करना होगा

उदाहरण JSFiddle

संपादित करें

चूंकि आपने उल्लेख किया है कि आप इसे पृष्ठ लोड पर करना चाहते हैं, मैं मान रहा हूँ कि आप इसे एएसएपी होने के लिए चाहते हैं जब उल डीओएम में है, जिसका मतलब है कि आपको फ़ंक्शन sortList जोड़ना चाहिए अपने पृष्ठ के प्रमुख के लिए सूची और अपनी सूची के तुरंत बाद इसका इस्तेमाल करें इस तरह:

 <head> ... <script type="text/javascript"> function sortList(ul){ var new_ul = ul.cloneNode(false); var lis = []; for(var i = ul.childNodes.length; i--;){ if(ul.childNodes[i].nodeName === 'LI') lis.push(ul.childNodes[i]); } lis.sort(function(a, b){ return parseInt(b.childNodes[0].data , 10) - parseInt(a.childNodes[0].data , 10); }); for(var i = 0; i < lis.length; i++) new_ul.appendChild(lis[i]); ul.parentNode.replaceChild(new_ul, ul); } </script> </head> <body> ... <ul class="list"> <li id="alpha">32</li> <li id="beta">170</li> <li id="delta">28</li> </ul> <script type="text/javascript"> !function(){ var uls = document.getElementsByTagName('ul'); sortList( uls[uls.length - 1] ); }(); </script> ... </body> 

आप इस हल्के jquery प्लगइन List.js कारण का उपयोग कर सकते हैं

  1. यह हल्के [केवल 3K स्क्रिप्ट] है
  2. क्लास का उपयोग करके अपने मौजूदा HTML तालिका में कार्यान्वित करना आसान है
  3. खोज योग्य, क्रमबद्ध और फिल्टर योग्य

एचटीएमएल

 <div id="my-list"> <ul class="list"> <li> <h3 class="name">Luke</h3> </li> <li> <h3 class="name">John</h3> </li> </ul> </div> 

जावास्क्रिप्ट

 var options = { valueNames: ['name'] }; var myList = new List('my-list', options); 

आप यह कोशिश कर सकते हैं

 var ul = $(".list:first"); var arr = $.makeArray(ul.children("li")); arr.sort(function(a, b) { var textA = +$(a).text(); var textB = +$(b).text(); if (textA < textB) return -1; if (textA > textB) return 1; return 0; }); ul.empty(); $.each(arr, function() { ul.append(this); }); 

लाइव उदाहरण: http://jsfiddle.net/B7hdx/1

यह कोड उस सूची को सॉर्ट करेगा जिसमें केवल एक ही है। .list आइटम:

 function sortList(selector) { var parent$ = $(selector); parent$.find("li").detach().sort(function(a, b) { return(Number(a.innerHTML) - Number(b.innerHTML)); }).each(function(index, el) { parent$.append(el); }); } sortList(".list"); 

आप इसे यहां काम कर सकते हैं: http://jsfiddle.net/jfriend00/FjuMB/

यह कैसे काम करता है की व्याख्या करने के लिए:

  1. यह .list पैरेंट ऑब्जेक्ट हो जाता है।
  2. यह सभी <li> बाल ऑब्जेक्ट्स पाता है
  3. यह DOM से सभी <li> बाल ऑब्जेक्ट को निकाल देता है, लेकिन उनके डेटा को सुरक्षित रखता है
  4. यह एक कस्टम सॉर्ट फ़ंक्शन का उपयोग करके ली ऑब्जेक्ट को व्यवस्थित करता है
  5. कस्टम सॉर्ट फंक्शन को ली टैग में HTML मिलता है और उसे किसी संख्या में परिवर्तित कर देता है
  6. फिर, नए क्रमबद्ध क्रम में सरणी को घुमाने के लिए, प्रत्येक ली टैग को मूल अभिभावक के साथ जोड़ा जाता है।

नतीजा यह है कि उन्हें क्रमबद्ध क्रम में प्रदर्शित किया जाता है।

संपादित करें:

यह सुधारीत संस्करण एक बार में कई सूची ऑब्जेक्ट को भी क्रमबद्ध करेगा:

 function sortList(selector) { $(selector).find("li").sort(function(a, b) { return(Number(a.innerHTML) - Number(b.innerHTML)); }).each(function(index, el) { $(el).parent().append(el); }); } sortList(".list"); 

डेमो: http://jsfiddle.net/jfriend00/RsLwX/

इस छोटी सी jQuery प्लगइन भी है जो आपके सॉर्ट से अधिक कुछ नहीं होगा:

 $('.list>li').tsort({attr:'id'}); 

ऐसा कुछ करना चाहिए:

 var $parent = $(".list"); $(".list li").sort(function (a, b) { return window.parseInt($(a).text(), 10) - window.parseInt($(b).text(), 10); }).remove().each(function () { $parent.append($(this)); }); 

एक विधि li तत्वों की एक सरणी (अच्छी तरह से, एक jQuery ऑब्जेक्ट) को सॉर्ट करने के लिए और तत्वों की छांटे हुए ul साथ ul की सामग्री ( html विधि का उपयोग करके) को बदल सकती है:

 $(".list").html($(".list li").sort(function(a, b) { return parseInt($(b).text(), 10) - parseInt($(a).text(), 10); })); 

यहाँ एक काम उदाहरण है

आप इस विधि का उपयोग कर सकते हैं:

 var mylist = $('ul'); var listitems = mylist.children('li').get(); listitems.sort(function(a, b) { var compA = $(a).text().toUpperCase(); var compB = $(b).text().toUpperCase(); return (compA < compB) ? -1 : (compA > compB) ? 1 : 0; }) $.each(listitems, function(idx, itm) { mylist.append(itm); }); 

लेख यहां देखें: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

संपादित करें: एक बहुत ही शांत jquery प्लगइन है जो ऐसा करता है: http://tinysort.sjeiti.com/

मदद के लिए jQuery का उपयोग कर:

 var sortFunction = function(a, b) { return (+($(b).text())) - (+($(a).text())); } var lis = $('ul.list li'); lis = Array.prototype.sort.call(lis, sortFunction); for (var i = 0; i < lis.length; i++) { $('ul.list').append(lis[i]); } 

फिल्ड लिंक

सामान्य संग्रह के रूप में jQuery के संग्रह को व्यवस्थित करें और फिर प्रत्येक तत्व को सही क्रम में वापस जोड़ें।

 $(".list li").sort(function(a, b) { return parseInt($(b).text(), 10) - parseInt($(a).text(), 10); }).appendTo('.list'); 

http://jsfiddle.net/zMmWj/

गैर jquery संस्करण (वेनिला जावास्क्रिप्ट)

लाभ: सूची को जगह में सॉर्ट किया गया है, जो कि लाई को नष्ट नहीं करता है और न ही उन घटनाओं को हटाता है जो उनके साथ जुड़ा हो सकते हैं। यह सिर्फ चीजों को चारों ओर घूमता है

यू को एक आईडी जोड़ा गया:

 <ul id="myList" class="list"> <li id="alpha">32</li> <li id="beta">170</li> <li id="delta">28</li> </ul> 

और वेनिला जावास्क्रिप्ट (कोई jquery)

 // Grab a reference to the UL var container = document.getElementById("myList"); // Gather all the LI's from the container var contents = container.querySelectorAll("li"); // The querySelector doesn't return a traditional array // that we can sort, so we'll need to convert the contents // to a normal array. var list = []; for(var i=0; i<contents.length; i++){ list.push(contents[i]); } // Sort based on innerHTML (sorts "in place") list.sort(function(a, b){ var aa = parseInt(a.innerHTML); var bb = parseInt(b.innerHTML); return aa < bb ? -1 : (aa > bb ? 1 : 0); }); // We'll reverse the array because our shuffle runs backwards list.reverse(); // Shuffle the order based on the order of our list array. for(var i=0; i<list.length; i++){ console.log(list[i].innerHTML); container.insertBefore(list[i], container.firstChild); } 

और बेला सबूत: https://jsfiddle.net/L27gpnh6/1/