How may I sort a list alphabetically using jQuery?

Question

I'm a bit out of my depth here and I'm hoping this is actually possible.

I'd like to be able to call a function that would sort all the items in my list alphabetically.

I've been looking through the jQuery UI for sorting but that doesn't seem to be it. Any thoughts?

http://stackoverflow.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-in-jquery — gen_Eric, Oct 15 '10 at 19:33
Check out [Underscore.js](http://documentcloud.github.com/underscore/#sortBy) or [Sugar.js](http://sugarjs.com/api/Array/sortBy). — Kris Khaira, Mar 01 '12 at 14:21

score 351 · Answer 1 · edited Mar 06 '14 at 09:56

351

Something like this:

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); });

From this page: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Above code will sort your unordered list with id 'myUL'.

OR you can use a plugin like TinySort. https://github.com/Sjeiti/TinySort

edited Mar 06 '14 at 09:56

Saravana

37,852
18
100
108

answered Jul 16 '09 at 01:24

SolutionYogi

31,807
12
70
78

6

Can the last line be replaced with $(listitems).appendTo(mylist); ? – Amir Jun 30 '10 at 06:00
26

H. L. Menken has a quote that describes this solution: "For every problem, there is a solution that is simple, elegant, and wrong." This process runs in O(n^2) time. It's not noticable with relatively short lists, but on a list containing over 100 elements it takes 3-4 seconds to finish sorting. – Nathan Strong Dec 29 '10 at 19:19
5

@Nathan: About "For every problem, there is a solution that is simple, elegant, and wrong." - well, a wrong solution is not elegant. – Johann Philipp Strathausen Jan 04 '11 at 11:01
19

Something can be elegant and intriguing to watch, but still fail. Elegance doesn't imply success. – Jane Panda Sep 29 '11 at 14:55
15

This solution is not wrong. It answers the question. The OP did not specify that he needed to sort a list of more than 100 items. If his list will never be longer than 100 items this solution is perfectly acceptable. +1 for pointing out that the solution is slow, -1 for declaring a solution that meets the requirements as 'wrong'. – Samurai Soul Nov 11 '14 at 15:27
This solution is more general - if I just wanted to sort a list of values, I would use Josh's solution. But if I want to sort an array of DOM elements based on some attribute of those elements, this solution is far superior. – Jason May 04 '15 at 19:54
3

This worked for me but I did add `trim()` to handle whitespace. `return $(a).text().toUpperCase().trim().localeCompare($(b).text().toUpperCase().trim())` – Dylan Valade Mar 10 '16 at 20:01
Documentation for `localeCompare` can be found here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare – Ken Apr 30 '19 at 11:06
2

@NathanStrong: Which process runs in O(n^2) time? – Ry- Jun 10 '19 at 15:34
In this case there is no need to empty or detach the existing list. Can someone explain me why? I tried with a test file and you don't get duplicated list items, you get same but ordered. Beyond that, it works perfectly. – jmrivas Jul 21 '20 at 22:52
1

Never mind, I've already found the answer in JQuery API Documentation site. This is what I was looking for "If an element selected this way is inserted into a single location elsewhere in the DOM, it will be moved into the target (not cloned)". Source: https://api.jquery.com/append/ – jmrivas Jul 21 '20 at 23:09
Thanks for that link to TinySort, made my list sorting a snap. – Simon Fallai Nov 30 '22 at 16:29

Josh Stodola · Accepted Answer · 2010-10-15T14:37:22.327

104

You do not need jQuery to do this...

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];
}

Easy to use...

sortUnorderedList("ID_OF_LIST");

Live Demo →

edited Oct 15 '10 at 14:37

answered Jul 16 '09 at 02:14

Josh Stodola

81,538
47
180
227

32

One problem that I found with this approach is that, since it's only the text that's being moved around, if you associate data to the DOM nodes using jQuery.data prior to sorting, those associations are now pointing to the wrong nodes after the sort. – Rudism Oct 28 '11 at 13:57
1

@Rudism If you're using jQuery, refer to SolutionYogi's answer below – Josh Stodola Oct 28 '11 at 15:38
Note that `var lis = ul.children` should suffice here (and is far more efficient). Also note that `lis[i].textContent` is preferred (as it's more efficient and get's the actual text). – Raynos Jan 16 '12 at 12:51
Attention down-voters: I would like to encourage you to run some tests before you make a haphazard judgement. This is not as bad as it looks, believe me! – Josh Stodola Jul 07 '12 at 05:25
14

Moving elements with innerHTML is a bad solution because they are not the same elements after sorting. All existing references to the elements are lost. All event listeners bound from JavaScript are lost. It would be better to store the elements instead of innerHTML, use a sort function (vals.sort(function(a, b) {return b.innerHTML < a.innerHTML;})) and appendChild to move elements. – gregers Sep 25 '12 at 08:35
4

Buhuuu innerHTML ! Don't use that. It's Microsoft Proprietary stuff and was never acknowledged by the W3C. – Stephan Kristyn Oct 24 '12 at 12:28
14

IMHO this is a horrible answer. It's perfectly possible to rearrange DOM nodes without serialising them and deserialising them again, and without destroying any attached properties and/or events. – Alnitak Jan 25 '13 at 22:45
If you want to sort `
One

Federico

Apr 30 '13 at 00:32

This works fine if you have anything but text inside your list-items. Otherwise it gets confused and doesn't sort correctly. – mroncetwice Dec 17 '14 at 22:54

It really only makes sense if you are just using one tag inside of another but if you are using A tags you cannot simply search for the a tags because you could have some lited items that are not links. – Coded Container Aug 03 '15 at 19:17

4

... but if you were to use jQuery, how would you do it? – Matthew Oct 26 '15 at 18:24

1

This answer is disastrous for DOM elements that have state attached (i.e events and data). The functions `Node.removeChild()` and and `Node.insertBefore()` exist for a reason. – Nick Bedford May 03 '17 at 23:57

1

This is a more robust answer that preserves data and attributes: https://stackoverflow.com/questions/304396/what-is-the-easiest-way-to-order-a-ul-ol-in-jquery – Crashalot Jun 25 '19 at 00:02

Jeetendra Chauhan · Answer 3 · 2013-06-17T09:32:07.263

102

$(".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;    
}

live demo : http://jsbin.com/eculis/876/edit

edited Jun 17 '13 at 09:32

answered Jan 12 '12 at 16:44

Jeetendra Chauhan

1,977
2
15
21

16

This is the best answer. I even like it in one single line like this: `$(".list li").sort(function(a, b){return ($(b).text()) < ($(a).text());}).appendTo('.list');`. One remark though: `.text()` should be `.text().toUpperCase()` – Jules Colle Mar 15 '12 at 04:46
Unfortunately this solution doesn't work in IE whilst PatrickHecks answer below works in all browsers. – patg Mar 21 '13 at 12:06
8

Beware of the selector! ".list li" will select all descendent LI tags, not just the immediate children. – Doug Domeny Nov 01 '13 at 21:14
3

@DougDomeny is right. Better to call `$(".list").children()`, if possible, or set up the selector with immediate child relationship like `$(".list > li")` – mroncetwice Dec 17 '14 at 19:46
1

BTW Here's a link to a fiddle i made using this answer. I set up the code as an all-in-one function: http://jsfiddle.net/mroncetwice/t0whh6fL/ – mroncetwice Dec 17 '14 at 20:20
This answer is **wrong**. It does not return 0 when text is same. – Salman A May 07 '15 at 08:04
improvements: `$(".list>li").sort...` to avoid mistakenly moving grand-children. `function asc_sort(a, b){return a.innerText.localeCompare(b.innerText);}` for much faster run. – oriadam Oct 20 '19 at 17:33

score 42 · Answer 4 · answered Jul 05 '12 at 06:34

42

To make this work work with all browsers including Chrome you need to make the callback function of sort() return -1,0 or 1.

see 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");

answered Jul 05 '12 at 06:34

PatrickHeck

451
4
3

2

Shouldn't all the li elements be removed from ul.myList before appending the sorted li elements ? – Daud Aug 28 '12 at 19:54
2

@Daud, the LI elements don't need to be explicitly removed. – Doug Domeny Nov 01 '13 at 21:58
1

Using .localeCompare would be an improvement for non-ASCII characters. – Doug Domeny Nov 01 '13 at 22:01
1

@DougDomeny, why don't the li elements need to be explicitly removed? – bowserm Jan 05 '15 at 18:23
3

@bowserm, the appendTo method moves the DOM elements rather than copying them. – Doug Domeny Jan 05 '15 at 22:32

score 36 · Answer 5 · edited May 23 '17 at 10:31

If you are using jQuery you can do this:

$(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>

Note that returning 1 and -1 (or 0 and 1) from the compare function is absolutely wrong.

This is absolutely fantastic, amazing, marvelous !! – Danielle Lpz Jan 06 '21 at 00:01 — Danielle Lpz, Jan 06 '21 at 00:01

Buzut · Answer 6 · 2014-08-12T11:48:34.113

8

@SolutionYogi's answer works like a charm, but it seems that using $.each is less straightforward and efficient than directly appending listitems :

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);

Fiddle

edited Aug 12 '14 at 11:48

answered Apr 17 '14 at 14:04

Buzut

4,875
4
47
54

$('#list').empty() --> mylist.empty() would be better. No need to touch the DOM again. – Jacob van Lingen Aug 12 '14 at 09:35
Absolutely, I just fixed it! – Buzut Aug 12 '14 at 11:50
This does not work in Internet Explorer (tested with version 10). – Chad Johnson Dec 10 '14 at 23:12
I just tested with IE11 and in fact, it doesn't work. But SolutionYogi's code didn't work neither under IE11… Did that work for you? – Buzut Dec 11 '14 at 13:00

score 6 · Answer 7 · answered Oct 20 '19 at 18:01

improvement based on Jeetendra Chauhan's answer

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

why i consider it an improvement:

using each to support running on more than one ul
using children('li') instead of ('ul li') is important because we only want to process direct children and not descendants
using the arrow function (a,b)=> just looks better (IE not supported)
using vanilla innerText instead of $(a).text() for speed improvement
using vanilla localeCompare improves speed in case of equal elements (rare in real life usage)
using appendTo(this) instead of using another selector will make sure that even if the selector catches more than one ul still nothing breaks

Resource friendly solution, highly recommended. – Moxet Jan Jul 14 '23 at 07:17 — Moxet Jan, Jul 14 '23 at 07:17

score 0 · Answer 8 · answered Mar 15 '14 at 03:49

I was looking to do this myself, and I wasnt satisfied with any of the answers provided simply because, I believe, they are quadratic time, and I need to do this on lists hundreds of items long.

I ended up extending jquery, and my solution uses jquery, but could easily be modified to use straight javascript.

I only access each item twice, and perform one linearithmic sort, so this should, I think, work out to be a lot faster on large datasets, though I freely confess I could be mistaken there:

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)));
    }
}

score 0 · Answer 9 · answered Feb 01 '16 at 09:42

0

Put the list in an array, use JavaScript's .sort(), which is by default alphabetical, then convert the array back to a list.

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

answered Feb 01 '16 at 09:42

Elon Zito

2,872
1
24
28

Mikhail · Answer 10 · 2016-10-24T15:12:32.923

HTML

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

JavaScript

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 Demo https://jsfiddle.net/97oo61nw/

Here we are push all values of li elements inside ul with specific id (which we provided as function argument) to array arr and sort it using sort() method which is sorted alphabetical by default. After array arr is sorted we are loop this array using forEach() method and just replace text content of all li elements with sorted content

How may I sort a list alphabetically using jQuery?

10 Answers10

Linked

Related