javascript sort of HTML elements

Question

I'm trying to sort an `li` elements and get an unexpacted result I need to sort it three times to get it correctly, where have I mistaken? javascript ``` var sort_by_name = function(a, b) { return a.innerHTML.toLowerCase() > b.innerHTML.toLowerCase(); } $this = $("ol#table1"); var list = $this.children(); list.sort(sort_by_name); console.log(list); $this.html(list); ``` HTML ```

I
IXX
I
I
I
I
I
I
IXX
I
I
I
I
I
st
st
st

``` fiddle example

Accepted Answer

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/

javascript sort of HTML elements

Solution

Problem