How may I sort a list alphabetically using jQuery?

Elementary sorting logic and methods

Must-knows: inner workings of alphabetic sorting

This efficient recipe uses the nifty localeCompare() function. It sorts strings based on local language norms, ensuring correct alphabetization even when dealing with oddball characters and accents. Let's dive a bit deeper:

• $('#myList li'): Targets list items nested within #myList.
• sort(): This built-in array method reorders the selected elements; needs a compare function for personalized sorting.
• localeCompare(): This sorting aficionado takes care of alphabetization across languages and character sets.
• append(): Drops the freshly sorted elements back into the original list.

Supercharging your sort function

Case doesn't matter here

To implement case-insensitive sorting, convert all texts to the same case (either upper or lower):

var $items = $('#myList li').sort((a, b) => {
    return $(a).text().toUpperCase().localeCompare($(b).text().toUpperCase());
});
$('#myList').append($items);  // As easy as ABC...literally!


The detach-reattach trick

To avoid a DOM manipulation overload, neatly detach the list, sort 'em, and stitch it back:

var $myList = $('#myList').detach();
var $items = $myList.children('li').sort(function(a, b) {
    return $(a).text().localeCompare($(b).text());
});
$myList.append($items).appendTo('body');  // Like doing a magic trick with fewer rabbits


Land of the rising sort

Control your sort's direction (ascending or descending) with a simple sorting flag:

var ascending = true; // Reverse for descending
var $items = $('#myList li').sort((a, b) => {
    return ascending ?
            $(a).text().localeCompare($(b).text()) :
            $(b).text().localeCompare($(a).text());  // "Mirror mirror on the wall, who's the top of them all?"
});
$('#myList').append($items);


Tiffany's of browser compatibility

Achieve cross-browser compatibility by feeding the sort function a detailed callback.

Plugins: your alternate superheroes

TinySort plugin swoops in with superpowers where jQuery's built-in methods might fall short. It tackles complex sorting quests and comes with bonus features:

$('ul#myList li').tinysort();  // "Hold my plugin!"


Skipping jQuery: the JavaScript way

Using vanilla JavaScript can sometimes lead to performance gains. Bypass jQuery with this:

var list = document.querySelector('#myList');
Array.from(list.children)
     .sort((a, b) => a.textContent.localeCompare(b.textContent))
     .forEach(node => list.appendChild(node));  // "Who needs shortcuts anyway?"


Demystifying the code

Seeing is believing! Explore a live demo on CodePen or JSFiddle to grasp how list sorting works its magic.