rodneyrehm/demo-list.html

## demo-list.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sorting lists</title>

    <script src="jquery-1.7.2.min.js"></script>
    <script src="jquery.sortChildren.js"></script>
    <script>
        $(function() {

            $('#sortme').sortChildren();
            $('#sortme-reverse').sortChildren(null, $.sortChildren.reverse);

        });
    </script>
</head>
<body>

    <h1>Sorting a list:</h1>
    <ul id="sortme">
        <li>delta</li>
        <li>bravo</li>
        <li>alpha</li>
        <li>charlie</li>
        <li>echo</li>
    </ul>

    <h1>Sorting a list descending:</h1>
    <ul id="sortme-reverse">
        <li>delta</li>
        <li>bravo</li>
        <li>alpha</li>
        <li>charlie</li>
        <li>echo</li>
    </ul>

</body>
</html>

## demo-table.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>sorting tables</title>

    <script src="/jquery/jquery-1.7.2.min.js"></script>
    <script src="jquery.sortChildren.js"></script>
    <script>
        $(function() {

            $('#sortme tbody').sortChildren(function(elem) {
                var t = [];
                $(elem).children().each(function() {
                    t.push($.sortChildren.map(elem));
                });
                return t;
            });

        });
    </script>
</head>
<body>

    <h1>Sorting a table by multiple columns</h1>
    <table id="sortme">
        <thead>
            <tr><th>One</th><th>Two</th><th>Three</th><th>Four</th></tr>
        </thead>
        <tbody>
            <tr><td>Zulu</td><td>Alpha</td><td>123</td><td>222</td></tr>
            <tr><td>Zulu</td><td>Charlie</td><td>222</td><td>222</td></tr>
            <tr><td>Alpha</td><td>Charlie</td><td>222</td><td>222</td></tr>
            <tr><td>Alpha</td><td>Charlie</td><td>444</td><td>222</td></tr>
            <tr><td>Alpha</td><td>Charlie</td><td>444</td><td>666</td></tr>
            <tr><td>Bravo</td><td>Charlie</td><td>111</td><td>111</td></tr>
            <tr><td>Bravo</td><td>Alpha</td><td>123</td><td>456</td></tr>
        </tbody>
    </table>

</body>
</html>

## jquery.sortChildren.js
/*!
 * jQuery.sortChildren
 *
 * Version: 1.0.0
 *
 * Author: Rodney Rehm
 * Web: http://rodneyrehm.de/
 * See: http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html
 *
 * @license
 *   MIT License http://www.opensource.org/licenses/mit-license
 *   GPL v3 http://opensource.org/licenses/GPL-3.0
 *
 */
(function($, undefined){

$.fn.sortChildren = function(map, compare) {
    return this.each(function() {
        var $this = $(this),
            $children = $this.children(),
            _map = [],
            length = $children.length,
            i;

        for (i = 0; i < length ; i++) {
            _map.push({
                index: i,
                value: (map || $.sortChildren.map)($children[i])
            });
        }

        _map.sort(compare || $.sortChildren.compare);

        for (i = 0; i < length ; i++) {
            this.appendChild($children[_map[i].index]);
        }
    });
};

$.sortChildren = {
    // default comparison function using String.localeCompare if possible
    compare: function(a, b) {
        if ($.isArray(a.value)) {
            return $.sortChildren.compareList(a.value, b.value);
        }
        return $.sortChildren.compareValues(a.value, b.value);
    },

    compareValues: function(a, b) {
        if (typeof a === "string" && "".localeCompare) {
            return a.localeCompare(b);
        }

        return a === b ? 0 : a > b ? 1 : -1;
    },

    // default comparison function for DESC
    reverse: function(a, b) {
        return -1 * $.sortChildren.compare(a, b);
    },

    // default mapping function returning the elements' lower-cased innerTEXT
    map: function(elem) {
        return $(elem).text().toLowerCase();
    },

    // default comparison function for lists (e.g. table columns)
    compareList: function(a, b) {
        var i = 1,
            length = a.length,
            res = $.sortChildren.compareValues(a[0], b[0]);

        while (res === 0 && i < length) {
            res = $.sortChildren.compareValues(a[i], b[i]);
            i++;
        }

        return res;
    }
};

})(jQuery);
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>sorting lists</title>

	<script src="jquery-1.7.2.min.js"></script>
	<script src="jquery.sortChildren.js"></script>
	<script>
	$(function() {

	$('#sortme').sortChildren();
	$('#sortme-reverse').sortChildren(null, $.sortChildren.reverse);

	});
	</script>
	</head>
	<body>

	<h1>Sorting a list:</h1>
	<ul id="sortme">
	<li>delta</li>
	<li>bravo</li>
	<li>alpha</li>
	<li>charlie</li>
	<li>echo</li>
	</ul>

	<h1>Sorting a list descending:</h1>
	<ul id="sortme-reverse">
	<li>delta</li>
	<li>bravo</li>
	<li>alpha</li>
	<li>charlie</li>
	<li>echo</li>
	</ul>

	</body>
	</html>
	/*!
	* jQuery.sortChildren
	*
	* Version: 1.0.0
	*
	* Author: Rodney Rehm
	* Web: http://rodneyrehm.de/
	* See: http://blog.rodneyrehm.de/archives/14-Sorting-Were-Doing-It-Wrong.html
	*
	* @license
	* MIT License http://www.opensource.org/licenses/mit-license
	* GPL v3 http://opensource.org/licenses/GPL-3.0
	*
	*/
	(function($, undefined){

	$.fn.sortChildren = function(map, compare) {
	return this.each(function() {
	var $this = $(this),
	$children = $this.children(),
	_map = [],
	length = $children.length,
	i;

	for (i = 0; i < length ; i++) {
	_map.push({
	index: i,
	value: (map \|\| $.sortChildren.map)($children[i])
	});
	}

	_map.sort(compare \|\| $.sortChildren.compare);

	for (i = 0; i < length ; i++) {
	this.appendChild($children[_map[i].index]);
	}
	});
	};

	$.sortChildren = {
	// default comparison function using String.localeCompare if possible
	compare: function(a, b) {
	if ($.isArray(a.value)) {
	return $.sortChildren.compareList(a.value, b.value);
	}
	return $.sortChildren.compareValues(a.value, b.value);
	},

	compareValues: function(a, b) {
	if (typeof a === "string" && "".localeCompare) {
	return a.localeCompare(b);
	}

	return a === b ? 0 : a > b ? 1 : -1;
	},

	// default comparison function for DESC
	reverse: function(a, b) {
	return -1 * $.sortChildren.compare(a, b);
	},

	// default mapping function returning the elements' lower-cased innerTEXT
	map: function(elem) {
	return $(elem).text().toLowerCase();
	},

	// default comparison function for lists (e.g. table columns)
	compareList: function(a, b) {
	var i = 1,
	length = a.length,
	res = $.sortChildren.compareValues(a[0], b[0]);

	while (res === 0 && i < length) {
	res = $.sortChildren.compareValues(a[i], b[i]);
	i++;
	}

	return res;
	}
	};

	})(jQuery);