javascript 类型的 HTML 元素 [英] javascript sort of HTML elements

查看:29
本文介绍了javascript 类型的 HTML 元素的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在尝试对 li 元素进行排序并得到一个意外的结果我需要对它进行三次排序才能正确获取它,

我哪里弄错了?javascript

var sort_by_name = function(a, b) {返回 a.innerHTML.toLowerCase() >b.innerHTML.toLowerCase();}$this = $("ol#table1");var list = $this.children();list.sort(sort_by_name);控制台日志(列表);$this.html(list);

HTML

    <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. 您需要一个返回正确值的比较函数:-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) {返回 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/

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

<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>

fiddle example

解决方案

There are much better ways to sort.

  1. You need a comparison function that returns the right values: -1, 0, and 1.
  2. localeCompare() is such a comparison function.
  3. You can just move the DOM elements around rather than regenerating the HTML.
  4. You can get the LI elements directly in the original selector.
  5. "#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 类型的 HTML 元素的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆