There are much better ways to sort.
- You need a comparison function that returns the right values: -1, 0, and 1.
localeCompare()
is such a comparison function.- You can just move the DOM elements around rather than regenerating the HTML.
- You can get the LI elements directly in the original selector.
"#table1"
is a more efficient selector than"ol#table1"
.
I would suggest this:
$("div#btn").click(function() {
var sort_by_name = function(a, b) {
return a.innerHTML.toLowerCase().localeCompare(b.innerHTML.toLowerCase());
}
var list = $("#table1 > li").get();
list.sort(sort_by_name);
for (var i = 0; i < list.length; i++) {
list[i].parentNode.appendChild(list[i]);
}
});
Which you can see work here: http://jsfiddle.net/jfriend00/yqd3w/