44

I'm looking for some sample code that will sort the list items in an HTML list by alphabetical order. Can anyone help?

Here is a sample list for people to work with:

<ul class="alphaList">
    <li>apples</li>
    <li>cats</li>
    <li>bears</li>
</ul>
Eric Schoonover
  • 47,184
  • 49
  • 157
  • 202

3 Answers3

99
var items = $('.alphaList > li').get();
items.sort(function(a,b){
  var keyA = $(a).text();
  var keyB = $(b).text();

  if (keyA < keyB) return -1;
  if (keyA > keyB) return 1;
  return 0;
});
var ul = $('.alphaList');
$.each(items, function(i, li){
  ul.append(li); /* This removes li from the old spot and moves it */
});
Flimm
  • 136,138
  • 45
  • 251
  • 267
Chatu
  • 4,688
  • 3
  • 22
  • 15
  • +1 This has come in handy in multiple spots, even for sorting tables :-) – gen_Eric Jul 20 '11 at 17:34
  • 3
    This sorts numbers, then capital letters, then lower case letters. i.e. ["5", "A", "B", "a", "b"] Might not be what some are looking for. – Tony R Nov 02 '11 at 05:34
  • 3
    @TonyR: That's just how JavaScript sorts strings. I guess you can change the strings to upper/lowercase if you wanted to. – gen_Eric Nov 04 '11 at 14:58
  • Great piece of code to quickly re-sort elements on page. This method does not seem to remove then add DOM elements, so it does not seem to add too much overhead to the process (specially with large amounts of data)... Thank you for posting. – Paul T. May 28 '13 at 21:11
  • 3
    @Chatu: Shouldn't you empty the ul before appending? – moriesta Jul 18 '13 at 07:16
  • 10
    @Acute: No, you don't have to. When you do `.append`, it will actually remove the element from its old spot and put it in its new spot. – gen_Eric Dec 13 '13 at 20:41
  • Works perfectly. Thanks very much. – CodeSlave Oct 21 '16 at 11:25
8

Try this:

var elems = $('.alphalist li').detach().sort(function (a, b) {
  return ($(a).text() < $(b).text() ? -1 
        : $(a).text() > $(b).text() ? 1 : 0);
}); 
$('.alphalist').append(elems);
berniecc
  • 401
  • 4
  • 6
  • This is simply a more concise version of the accepted answer. The other is better for understanding the concept, but this is shorter. It's good to have both! – TheThirdMan Jan 15 '17 at 18:17
7

For future googlers, I've found this plugin very useful. It has option to define character order for non-latin languages.

Older versions (jQuery dependent)

$('.submenu > li').tsort({
    charOrder: 'abcçdefgğhıijklmnoöprsştuüvyz'
});

For English only characters, no option is needed to define

$('.submenu > li').tsort();

Current version (jQuery independent) (29 March 2016)

Current version of tinysort is now independent from jQuery. Pure JavaScript. I updated jsfiddle for new version usage.

tinysort('.submenu > li', {
    charOrder: 'abcçdefgğhıijklmnoöprsştuüvyz'
});

Demo http://jsfiddle.net/ergec/EkScy/

Website http://tinysort.sjeiti.com/

Ergec
  • 11,608
  • 7
  • 52
  • 62
  • 1
    Doesn't `localeCompare` function account for that? https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/localeCompare – Tomalla Sep 23 '13 at 10:49
  • `` works great too! – Uncle Iroh Jun 12 '14 at 23:57
  • @Tomalla seems browser support of `localeCompare` is not that good. Requires IE 11, also desktop Safari and most of the mobile browsers do not support it at all. So using this won't be the best practice for near future. – Ergec Jun 16 '14 at 05:37
  • 1
    @MaggewDotCom `charOrder` is required only for locale support. For English characters only, `tsort()` itself is enough. – Ergec Jun 16 '14 at 05:54