Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
jQuery Snippets - jQuery.sortChildren()
<!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>
<!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
*
* 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);
@rodneyrehm

This comment has been minimized.

Copy link
Owner Author

commented May 29, 2012

Read the blog post Sorting - We're Doing It Wrong.

@ricardosaracino

This comment has been minimized.

Copy link

commented May 30, 2012

cool post

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.