javascript 类型的 HTML 元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10186192/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript sort of HTML elements
提问by shevski
I'm trying to sort an lielements and get an unexpacted result
I need to sort it three times to get it correctly,
我正在尝试对一个li元素进行排序并得到一个意外的结果我需要将它排序三遍才能正确获取它，
where have I mistaken? javascript
我哪里弄错了？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
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>
回答by jfriend00
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".
- 您需要一个返回正确值的比较函数：-1、0 和 1。
localeCompare()就是这样的比较函数。- 您可以只移动 DOM 元素而不是重新生成 HTML。
- 您可以直接在原始选择器中获取 LI 元素。
"#table1"是一个比 更有效的选择器"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/
你可以在这里看到工作：http: //jsfiddle.net/jfriend00/yqd3w/
回答by Bergi
A custom compareFunctionneeds to return -1, 0 or 1.
一个自定义的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;
}
回答by Chuck Norris
var sort_by_name = function(a, b) {
return $(a).text().toLowerCase().localeCompare($(b).text().toLowerCase());
}
You can use localeCompare instead to make things more elegant and workable.
您可以改用 localeCompare 使事情变得更加优雅和可行。
See jsfiddle http://jsfiddle.net/Qww87/11/
见 jsfiddle http://jsfiddle.net/Qww87/11/
回答by Silviu-Marian
according to documentation it needs numeric values. more intelligible:
根据文档，它需要数值。更易懂：
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;
}
回答by Abdennour TOUMI
Use my jquery plugin Sort Content :
使用我的 jquery 插件排序内容：
$('ol#table1').sortContent({asc:true})
That's it!
就是这样！
