javascript排序的HTML元素

我正在尝试对li元素进行排序并获得未经validation的结果，我需要对其进行三次排序才能正确完成，

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

小提琴的例子

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 sbsa ? 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/

Answer 4

根据文档，它需要数值。 更易理解：

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

Answer 5

使用我的jquery插件排序内容：

  $('ol#table1').sortContent({asc:true}) 

而已！

演示： http ： //jsfiddle.net/abdennour/SjWXU/