JSFiddle - React, Tailwind, and code Playground

by Taswar Bhatti

HTML

English sort
<ul id="mylist">
    <li>Orange</li>
    <li>Apple</li>
    <li>Pear</li>
</ul>

French Sort
<ul id="mylist2">
    <li>Orange</li>
    <li>Pomme</li>
    <li>Poir</li>
</ul>

Simplified Chinese sort
<ul id="mylist3">
    <li>橙</li>
    <li>苹果</li>
    <li>梨</li>
</ul>

Custom compare sort
<ul id="mylist4">
    <li>J</li>
    <li>C</li>
    <li>K</li>
</ul>

JavaScript

(function ($) {
    $.fn.localeSort = function (options) {
        var settings = $.extend({}, $.fn.localeSort.defaults, options), $this = this;
        
        return this.each(function () {
            function sorty(list, compare, elem) {
		elem = typeof elem !== 'undefined' ? elem : 'li';
				
                var listElements = list.find(elem);
                
                listElements.sort(compare);

                list.empty();

                listElements.each(function (index, li) {
                    list.append(li);
                });
            }
            
            if (settings.ul === true) {
                sorty($this, settings.compare);
            }
        });
    };

    $.fn.localeSort.defaults = {
        ul: true,
        compare: function localeCompareSort(a, b) {
            var t1 = $(a),
                t2 = $(b);
            return t1.text().localeCompare(t2.text());
        }
    };
}(jQuery));

$(function() {
   $('#mylist').localeSort();
    $('#mylist2').localeSort();
    $('#mylist3').localeSort();
    var compareFun = function localeCompareSort(a, b) {
            var t1 = $(a),
                t2 = $(b);
            return t1.text() > t2.text();
    }
    
    $('#mylist4').localeSort({compare: compareFun});
    
});