javascript排序的HTML元素 [英] javascript sort of HTML elements
本文介绍了javascript排序的HTML元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试对 li
元素进行排序并获得未公布的结果
我需要对其进行三次排序才能正确使用
I'm trying to sort an li
elements and get an unexpacted result
I need to sort it three times to get it correctly,
我错了哪里?
javascript
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
<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>
推荐答案
有更好的排序方法。
- 您需要一个返回正确值的比较函数:-1,0和1.
-
localeCompare()
就是这样的比较函数。 - 您只需移动DOM元素而不是重新生成HTML。
- 您可以直接在原始选择器中获取LI元素。
-
#table1
是一个比ol#table1
更高效的选择器。
- 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建议如下:
$("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/
Which you can see work here: http://jsfiddle.net/jfriend00/yqd3w/
这篇关于javascript排序的HTML元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文