Sort an html list with javascript

Question

I have a set of three list items that I would like to automatically display from high to low on page load. Ideally using jquery or javascript.

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

Each list item needs its own ID because they each have individual background images. The numbers must text nodes so that a user can edit them.

@maerics I tried originaly to build it up from scratch with an array `function listSort(a, B) { return a - b; } var n = ["10", "775", "40", "1125","1", "8"]; document.write(n.sort(listSort));` I got as far as rearranging the list in order but couldnt figure it to work with different list IDs. — danssker, Jan 12 '12 at 17:21

Paul · Accepted Answer · 2015-02-11T13:18:09.470

24

This will probably be the fastest way to do it, since it doesn't use 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);
}

Call the function like:

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

You can sort other lists the same way, and if you have other elements on the same page with the list class you should give your ul an id and pass it in using that instead.

Example JSFiddle

Edit

Since you mentioned that you want it to happen on pageLoad, I'm assuming you want it to happen ASAP after the ul is in the DOM which means you should add the function sortList to the head of your page and use it immediately after your list like this:

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

edited Feb 11 '15 at 13:18

answered Jan 12 '12 at 15:09

Paul

139,544
27
275
264

1

That's beautiful - works a charm. Now to try and disect what you wrote..! – danssker Jan 12 '12 at 17:07
Note: this won't work in versions of IE before IE9 without more code because `getElementsByClassName()` doesn't exist in older versions of IE. – jfriend00 Jan 12 '12 at 17:41
2

@danssker - Why you would pick the more complicated native javascript version over the simpler jQuery version if you're already using jQuery? Can you really see a performance difference on an operation like this? My mantra in this regard is: go with simplicity first and only add complexity if you absolutely need it. – jfriend00 Jan 12 '12 at 17:44
1

Why clone the `UL` node? You can just reinsert the sorted `LI` nodes to the original `UL` node. – jfriend00 Jan 12 '12 at 17:46
@jfriend00 You mean versions before IE 7, not IE 9... Also the sortList function works in IE 6, just need to call it differently like I said with using an id. – Paul Jan 12 '12 at 17:47
1

@jfriend00 It is much faster to clone the node, because the browser doesn't need to rerender after every appendChild. The difference will be in the seconds range if the ul contains thousands of lis. – Paul Jan 12 '12 at 17:48
1

@jfriend00 I meant reflow not rerender – Paul Jan 12 '12 at 17:53
I think you're mistaken. According to both [this compatibility page](http://www.quirksmode.org/dom/w3c_core.html) and [this test page](http://jsfiddle.net/jfriend00/hwd8D/) run in IE8, `document.getElementsByClassName()` does not exist in IE8. This is one of the advantages of using jQuery - you don't have to do selector-type things differently in different browsers. – jfriend00 Jan 12 '12 at 17:55
@jfriend00 Huh... I suppose you're right about `getElementsByclassName`, still it's better to just use an id, and like I said my sortList function is cross browser :) It's easy to write your own getElementsByClassName for browsers which do not support it, and considering the OP wants this to execute immediately I think it's a good idea to use the fastest code possible. – Paul Jan 12 '12 at 18:16
@jfriend00 I said if i was using jquery I would have gone with jquery. For exactly the same reason you mentioned, why complicate things by preloading the jquery library when I only needed it for this one thing. – danssker Jan 13 '12 at 09:02
@danssker - you did tag your question with jQuery. I'm not sure why you did that if you don't want any jQuery solutions. – jfriend00 Jan 13 '12 at 14:18
@jfriend00 true, i did that. my apologies. i guess i'd did expect so many comprehensive replies. I'm a bit overwhelmed! – danssker Jan 13 '12 at 17:55
@danssker I'm glad you tagged it with `jquery`, although this solution seems neat, since I'm using jQuery, I prefer the solution with it. – CPHPython Sep 05 '16 at 12:34
`for(var i = ul.childNodes.length; i--;)` is equivalent to `for(var i = ul.childNodes.length - 1; i>=0; i--)`. Seems like it's a shortcut that takes advantage of [the optional nature of the for statements's final-expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) by decrementing within the conditional and leaving the final-expression blank. I had never seen this before so I had to take some time to puzzle this out. – qyb2zm302 Jun 14 '20 at 19:49

score 6 · Answer 2 · answered Aug 03 '12 at 14:34

you can use this lightweight jquery plugin List.js cause

it's lightweight [only 3K script]
easy to implement in your existing HTML table using class
searchable, sortable and filterable

HTML

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

Javascript

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

score 6 · Answer 3 · answered Jan 12 '12 at 15:07

6

You can try this

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

Live example : http://jsfiddle.net/B7hdx/1

answered Jan 12 '12 at 15:07

Francis

3,335
20
46

1

Have you fully tested your live example? It displayed "170 28 32" – Gran Jan 12 '12 at 15:09
Nice... if my site was already using jquery I would have used this. – danssker Jan 12 '12 at 17:16

score 6 · Answer 4 · edited Oct 15 '14 at 17:08

6

There's also this small jQuery plugin. Which would make your sort nothing more than:

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

edited Oct 15 '14 at 17:08

T J

42,762
13
83
138

answered Feb 06 '12 at 20:42

Sjeiti

2,468
1
31
33

jfriend00 · Answer 5 · 2012-01-12T17:36:43.467

This code will sort that list assuming there is only one .list item:

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

You can see it work here: http://jsfiddle.net/jfriend00/FjuMB/

To explain how it works:

It gets the .list parent object.
It finds all the <li> child objects.
It removes all the <li> child objects from the DOM, but preserves their data
It sorts the li objects using a custom sort function
The custom sort function gets the HTML in the li tag and converts it to a number
Then, traversing the array in the newly sorted order, each li tag is appended back onto the original parent.

The result is that they are displayed in sorted order.

Edit:

This improved version will even sort multiple list objects at once:

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

Demo: http://jsfiddle.net/jfriend00/RsLwX/

score 3 · Answer 6 · answered Jun 26 '15 at 15:14

Non jquery version (vanilla javascript)

Benefits: the list is sorted in place, which doesn't destroy the LI's nor remove any events that may be associated with them. It just shuffles things around

Added an id to the UL:

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

and the vanilla javascript (no 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);
}

And the fiddle proof: https://jsfiddle.net/L27gpnh6/1/

Bob thanks, the best solution I've found thus far. You can also use data attributes `parseInt(a.getAttribute(attr))` — Hector, Nov 09 '18 at 14:27
Thanks, Here is a solution for sorting alphabetically: `list.sort(function(a, b){` `var aa = a.innerHTML;` `var bb = b.innerHTML;` `return aa.localeCompare(bb);` `});` — Ludo, Jan 13 '22 at 15:40

James Allardice · Answer 7 · 2012-01-12T15:14:49.790

1

One method could be to sort an array (well, a jQuery object) of the li elements and replace the contents (using the html method) of the ul with the sorted array of elements:

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

Here's a working example.

edited Jan 12 '12 at 15:14

answered Jan 12 '12 at 15:09

James Allardice

164,175
21
332
312

thanks, looks nice but.. not sure the sort array is working properly here? looks like its sorting by first digit and not by the actual value. – danssker Jan 12 '12 at 17:12

score 1 · Answer 8 · answered Jan 12 '12 at 15:10

You can use this method:

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

Check the article here: http://www.onemoretake.com/2009/02/25/sorting-elements-with-jquery/

Edit: There is a very cool jquery plugin that does that : http://tinysort.sjeiti.com/

score 1 · Answer 9 · answered Jan 12 '12 at 15:11

1

Something like this should help:

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

answered Jan 12 '12 at 15:11

jabclab

14,786
5
54
51

Skyrim · Answer 10 · 2012-01-12T15:16:06.863

0

using jQuery for help:

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

Fiddle Link

edited Jan 12 '12 at 15:16

answered Jan 12 '12 at 15:08

Skyrim

865
5
6

score 0 · Answer 11 · answered Jan 12 '12 at 15:27

0

Sort jQuery collection as usual array and then append each element back in correct order.

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

http://jsfiddle.net/zMmWj/

answered Jan 12 '12 at 15:27

dfsq

191,768
25
236
258

Sort an html list with javascript

11 Answers11

Linked

Related