मैं jQuery का उपयोग करके किसी सूची को वर्णानुक्रम में कैसे सॉर्ट कर सकता हूं?


233

मैं यहां अपनी गहराई से थोड़ा बाहर हूं और उम्मीद कर रहा हूं कि यह वास्तव में संभव है।

मैं एक फ़ंक्शन को कॉल करने में सक्षम होना चाहता हूं जो मेरी सूची के सभी आइटम वर्णानुक्रम में सॉर्ट करेगा।

मैं jQuery यूआई के माध्यम से छँटाई के लिए देख रहा हूँ, लेकिन ऐसा नहीं लगता है। कोई विचार?



की जाँच करें Underscore.js या Sugar.js
क्रिश खैरा

जवाबों:


106

ऐसा करने के लिए आपको jQuery की आवश्यकता नहीं है ...

function sortUnorderedList(ul, sortDescending) {
  if(typeof ul == "string")
    ul = document.getElementById(ul);

  // Idiot-proof, remove if you want
  if(!ul) {
    alert("The UL object is null!");
    return;
  }

  // Get the list items and setup an array for sorting
  var lis = ul.getElementsByTagName("LI");
  var vals = [];

  // Populate the array
  for(var i = 0, l = lis.length; i < l; i++)
    vals.push(lis[i].innerHTML);

  // Sort it
  vals.sort();

  // Sometimes you gotta DESC
  if(sortDescending)
    vals.reverse();

  // Change the list on the page
  for(var i = 0, l = lis.length; i < l; i++)
    lis[i].innerHTML = vals[i];
}

प्रयोग करने में आसान...

sortUnorderedList("ID_OF_LIST");

लाइव डेमो →


29
एक समस्या जो मुझे इस दृष्टिकोण से मिली, वह यह है कि चूंकि यह केवल पाठ है जिसे चारों ओर ले जाया जा रहा है, यदि आप डेटा को सॉर्ट करने से पहले jQuery.data का उपयोग कर डोम नोड्स से जोड़ते हैं, तो उन संघों को अब सॉर्ट के बाद गलत नोड्स की ओर इशारा किया जाता है।
रुडिज़्म

13
आंतरिक HTML के साथ तत्वों को ले जाना एक बुरा समाधान है क्योंकि वे छँटाई के बाद समान तत्व नहीं हैं। तत्वों के सभी मौजूदा संदर्भ खो गए हैं। जावास्क्रिप्ट से बंधे सभी ईवेंट श्रोता खो गए हैं। इनरएचटीएमएल के बजाय तत्वों को संग्रहित करना बेहतर होगा, तत्वों को स्थानांतरित करने के लिए एक प्रकार्य फ़ंक्शन (वैलसॉर्ट (फ़ंक्शन (ए, बी)) रिटर्न बी.एन.नरोलॉट <a.innerHTML;}) और एपेंडचाइल्ड का उपयोग करें।
ग्रेगर्स

3
Buhuuu भीतर HTML! उस का उपयोग न करें। यह Microsoft मालिकाना सामान है और W3C द्वारा कभी स्वीकार नहीं किया गया था।
स्टीव के

13
IMHO यह एक भयानक जवाब है। डोम नोड्स को उन्हें क्रमबद्ध किए बिना और फिर से उन्हें पुन: व्यवस्थित करना और बिना किसी संलग्न गुण और / या घटनाओं को नष्ट किए बिना पूरी तरह से संभव है।
अलनीतक

3
... लेकिन अगर आप jQuery का उपयोग करते हैं, तो आप इसे कैसे करेंगे?
मैथ्यू

332

कुछ इस तरह:

var mylist = $('#myUL');
var listitems = mylist.children('li').get();
listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})
$.each(listitems, function(idx, itm) { mylist.append(itm); });

इस पृष्ठ से: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

ऊपर कोड आईडी 'myUL' के साथ आपकी अनियंत्रित सूची को सॉर्ट करेगा।

या आप TinySort जैसे प्लगइन का उपयोग कर सकते हैं। https://github.com/Sjeiti/TinySort


6
क्या अंतिम पंक्ति को $ (सूचीपत्र) .appendTo (mylist) से बदला जा सकता है; ?
अमीर

26
एचएल मेनकेन का एक उद्धरण है जो इस समाधान का वर्णन करता है: "हर समस्या के लिए, एक समाधान है जो सरल, सुरुचिपूर्ण और गलत है।" यह प्रक्रिया O (n ^ 2) समय में चलती है। यह अपेक्षाकृत कम सूचियों के साथ ध्यान देने योग्य नहीं है, लेकिन 100 से अधिक तत्वों वाली सूची में छंटाई खत्म करने में 3-4 सेकंड लगते हैं।
नाथन स्ट्रॉन्ग

5
@ नथन: "हर समस्या के लिए, एक समाधान है जो सरल, सुरुचिपूर्ण और गलत है।" - ठीक है, एक गलत समाधान सुरुचिपूर्ण नहीं है।
जोहान फिलिप स्ट्रैटहॉजेन

18
कुछ देखने के लिए सुरुचिपूर्ण और पेचीदा हो सकता है, लेकिन फिर भी असफल हो सकता है। लालित्य सफलता का मतलब नहीं है।
जेन पांडा

13
यह समाधान गलत नहीं है। यह सवाल का जवाब देता है। ओपी ने यह निर्दिष्ट नहीं किया कि उसे 100 से अधिक वस्तुओं की सूची को क्रमबद्ध करने की आवश्यकता है। यदि उसकी सूची 100 वस्तुओं से अधिक लंबी नहीं होगी तो यह समाधान पूरी तरह स्वीकार्य है। +1 यह बताने के लिए कि समाधान धीमा है, -1 ऐसे समाधान की घोषणा करने के लिए जो आवश्यकताओं को 'गलत' के रूप में पूरा करता है।
समुराई सोल

94
$(".list li").sort(asc_sort).appendTo('.list');
//$("#debug").text("Output:");
// accending sort
function asc_sort(a, b){
    return ($(b).text()) < ($(a).text()) ? 1 : -1;    
}

// decending sort
function dec_sort(a, b){
    return ($(b).text()) > ($(a).text()) ? 1 : -1;    
}

लाइव डेमो: http://jsbin.com/eculis/876/edit


15
यह सबसे अच्छा जवाब है। मैं भी इसे इस तरह से एक ही पंक्ति में पसंद करता हूं $(".list li").sort(function(a, b){return ($(b).text()) < ($(a).text());}).appendTo('.list');:। एक टिप्पणी हालांकि: .text()होनी चाहिए.text().toUpperCase()
जूल्स कोल

दुर्भाग्य से यह समाधान IE में काम नहीं करता है, जबकि पैट्रिक हेक नीचे सभी ब्राउज़रों में काम करता है।
patg

8
चयनकर्ता से सावधान! "। लिस्ट ली" केवल सभी तात्कालिक बच्चों को नहीं, बल्कि सभी वंशज LI टैग्स का चयन करेंगे।
डौग डॉमेनी

3
@DougDomeny सही है। कॉल करने के लिए बेहतर है $(".list").children(), यदि संभव हो, या चयनकर्ता को तत्काल बच्चे के रिश्ते के साथ सेट करें जैसे$(".list > li")
mroncetwice

1
BTW यहाँ एक फिडेल का लिंक है जो मैंने इस उत्तर का उपयोग करके बनाया है। मैं एक ऑल-इन-वन फ़ंक्शन के रूप में कोड सेट करता हूं: jsfiddle.net/mroncetwice/t0whh6fL
mroncetwice

39

Chrome सहित सभी ब्राउज़रों के साथ इस कार्य को करने के लिए आपको कॉलबैक फ़ंक्शन को सॉर्ट () रिटर्न -1,0 या 1 करना होगा।

देख http://inderpreetsingh.com/2010/12/01/chromes-javascript-sort-array-function-is-different-yet-proper/

function sortUL(selector) {
    $(selector).children("li").sort(function(a, b) {
        var upA = $(a).text().toUpperCase();
        var upB = $(b).text().toUpperCase();
        return (upA < upB) ? -1 : (upA > upB) ? 1 : 0;
    }).appendTo(selector);
}
sortUL("ul.mylist");

2
क्या सभी ली तत्वों को छंटनी किए गए ली तत्वों को लागू करने से पहले ul.myList से नहीं हटाया जाना चाहिए?
दाउद

2
@Daud, LI तत्वों को स्पष्ट रूप से हटाने की आवश्यकता नहीं है।
डौग डॉमेनी

1
गैर। ASCII वर्णों के लिए .localeCompare का उपयोग करना एक सुधार होगा।
डौग डॉमेनी

1
@DougDomeny, झूठे तत्वों को स्पष्ट रूप से हटाने की आवश्यकता क्यों नहीं है?
धनुषाकार

3
@bowserm, परिशिष्ट विधि उन्हें कॉपी करने के बजाय DOM तत्वों को स्थानांतरित करती है।
डौग डॉमेनी

31

यदि आप jQuery का उपयोग कर रहे हैं तो आप यह कर सकते हैं:

$(function() {

  var $list = $("#list");

  $list.children().detach().sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
  }).appendTo($list);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<ul id="list">
  <li>delta</li>
  <li>cat</li>
  <li>alpha</li>
  <li>cat</li>
  <li>beta</li>
  <li>gamma</li>
  <li>gamma</li>
  <li>alpha</li>
  <li>cat</li>
  <li>delta</li>
  <li>bat</li>
  <li>cat</li>
</ul>

ध्यान दें कि तुलना फ़ंक्शन से 1 और -1 (या 0 और 1) वापस करना बिल्कुल गलत है


7

@ सॉल्यूयोगी का जवाब एक आकर्षण की तरह काम करता है, लेकिन ऐसा लगता है कि $ .each का उपयोग करना सीधे-सीधे सुनने वाले लोगों की तुलना में कम सीधा और कुशल है:

var mylist = $('#list');
var listitems = mylist.children('li').get();

listitems.sort(function(a, b) {
   return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
})

mylist.empty().append(listitems);

बेला


$ ('# सूची')। खाली () -> mylist.empty () बेहतर होगा। फिर से DOM को छूने की आवश्यकता नहीं है।
जैकब वैन लिंगेन

बिल्कुल, मैंने इसे ठीक कर दिया!
बुज़ुत

यह इंटरनेट एक्सप्लोरर (संस्करण 10 के साथ परीक्षण) में काम नहीं करता है।
चाड जॉनसन

मैं सिर्फ IE11 के साथ परीक्षण किया है और वास्तव में, यह काम नहीं करता है। लेकिन SolutionYogi के कोड ने IE11 के तहत न तो काम किया ... क्या आपके लिए यह काम किया गया?
बूजुत

1

जीतेंद्र चौहान के जवाब के आधार पर सुधार

$('ul.menu').each(function(){
    $(this).children('li').sort((a,b)=>a.innerText.localeCompare(b.innerText)).appendTo(this);
});

मैं इसे सुधार क्यों मानता हूं:

  1. eachएक से अधिक उल पर चलने वाले समर्थन का उपयोग करना

  2. children('li')इसके बजाय का उपयोग करना ('ul li')महत्वपूर्ण है क्योंकि हम केवल सीधे बच्चों को संसाधित करना चाहते हैं न कि वंशजों को

  3. तीर फ़ंक्शन का उपयोग करना (a,b)=>बेहतर लगता है (IE समर्थित नहीं है)

  4. गति में सुधार के innerTextबजाय वेनिला का उपयोग $(a).text()करना

  5. localeCompareसमान तत्वों के मामले में वेनिला का उपयोग करने से गति में सुधार होता है (वास्तविक जीवन में दुर्लभ)

  6. appendTo(this)दूसरे चयनकर्ता का उपयोग करने के बजाय यह सुनिश्चित करना कि भले ही चयनकर्ता एक से अधिक उलट पकड़ता है फिर भी कुछ नहीं टूटता है


0

मैं खुद ऐसा करना चाह रहा था, और मैं किसी भी तरह से दिए गए जवाबों से संतुष्ट नहीं था, क्योंकि मेरा मानना ​​है कि वे द्विघात समय के हैं, और मुझे सैकड़ों वस्तुओं की सूची में यह करने की आवश्यकता है।

मैंने जक्वेरी का विस्तार किया, और मेरे समाधान में जक्वेरी का उपयोग किया गया , लेकिन सीधे जावास्क्रिप्ट का उपयोग करने के लिए आसानी से संशोधित किया जा सकता था।

मैं केवल प्रत्येक आइटम को दो बार एक्सेस करता हूं, और एक लीनियरथमिक सॉर्ट करता हूं, इसलिए मुझे लगता है, बड़े डेटासेट पर बहुत तेजी से काम करना चाहिए, हालांकि मैं स्वतंत्र रूप से स्वीकार करता हूं कि मुझसे गलती हो सकती है:

sortList: function() {
   if (!this.is("ul") || !this.length)
      return
   else {
      var getData = function(ul) {
         var lis     = ul.find('li'),
             liData  = {
               liTexts : []
            }; 

         for(var i = 0; i<lis.length; i++){
             var key              = $(lis[i]).text().trim().toLowerCase().replace(/\s/g, ""),
             attrs                = lis[i].attributes;
             liData[key]          = {},
             liData[key]['attrs'] = {},
             liData[key]['html']  = $(lis[i]).html();

             liData.liTexts.push(key);

             for (var j = 0; j < attrs.length; j++) {
                liData[key]['attrs'][attrs[j].nodeName] = attrs[j].nodeValue;
             }
          }

          return liData;
       },

       processData = function (obj){
          var sortedTexts = obj.liTexts.sort(),
              htmlStr     = '';

          for(var i = 0; i < sortedTexts.length; i++){
             var attrsStr   = '',
                 attributes = obj[sortedTexts[i]].attrs;

             for(attr in attributes){
                var str = attr + "=\'" + attributes[attr] + "\' ";
                attrsStr += str;
             }

             htmlStr += "<li "+ attrsStr + ">" + obj[sortedTexts[i]].html+"</li>";
          }

          return htmlStr;

       };

       this.html(processData(getData(this)));
    }
}

0

सूची को किसी सरणी में रखें, जावास्क्रिप्ट का उपयोग करें .sort(), जो डिफ़ॉल्ट वर्णानुक्रम द्वारा है, फिर सरणी को वापस सूची में परिवर्तित करें।

http://www.w3schools.com/jsref/jsref_sort.asp


0

एचटीएमएल

<ul id="list">
    <li>alpha</li>
    <li>gamma</li>
    <li>beta</li>
</ul>

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

function sort(ul) {
    var ul = document.getElementById(ul)
    var liArr = ul.children
    var arr = new Array()
    for (var i = 0; i < liArr.length; i++) {
        arr.push(liArr[i].textContent)
    }
    arr.sort()
    arr.forEach(function(content, index) {
        liArr[index].textContent = content
    })
}

sort("list")

JSFiddle डेमो https://jsfiddle.net/97oo61nw/

यहाँ हम सभी मूल्यों को आगे बढ़ा रहे हैं liul विशिष्ट id(जिसे हमने फ़ंक्शन तर्क के रूप में प्रदान किया है) के तत्वों को सरणी arrऔर सॉर्ट () विधि का उपयोग करके क्रमबद्ध करते हैं जो डिफ़ॉल्ट रूप से वर्णानुक्रम में सॉर्ट किया जाता है। सरणी arrको सॉर्ट करने के बाद हम इस सरणी को forEach () विधि का उपयोग करके लूप कर रहे हैं और केवल सभी liतत्वों के टेक्स्ट कंटेंट को सॉर्ट की गई सामग्री से बदल दें

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.