javascript排序的HTML元素

Question

我正在尝试对一个li元素进行排序并获得一个未公开的结果,我需要对其进行三次排序才能正确地进行,

哪里弄错了？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

<ol id="table1" style="display: block; ">
   <li class="menu__run">I</li>
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li> 
   <li class="menu__run">IXX</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__run">I</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
   <li class="menu__test">st</li>
</ol>

小提琴的例子

Answer 1

有更好的排序方法.

1. 您需要一个返回正确值的比较函数:-1,0和1.
2. localeCompare() 是这样的比较功能.
3. 您可以只移动DOM元素而不是重新生成HTML.
4. 您可以直接在原始选择器中获取LI元素.
5. "#table1"是比一个更有效的选择器"ol#table1".

我建议这样:

$("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]);
    }
});?

您可以在这里看到工作:http://jsfiddle.net/jfriend00/yqd3w/

Answer 2

一个自定义的compareFunction需要返回-1,0或1.

function sort_by_name(a, b) {
    var sa = a.innerHTML.toLowerCase(), sb = b.innerHTML.toLowerCase();
    return sb<sa ? -1 : sb>sa ? 1 : 0;
}

Answer 3

var sort_by_name = function(a, b) {
    return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}

您可以使用localeCompare来使事情更加优雅和可行.

见jsfiddle http://jsfiddle.net/Qww87/11/