javascript 类型的 HTML 元素

IT技术 javascript jquery sorting
2021-03-15 16:28:02

我正在尝试对一个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>

小提琴示例

5个回答

有更好的排序方法。

  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/

我再提一个问题
2021-04-19 16:28:02
您正在比较人眼，因此您想忽略所有标记。而不是.innerHTML，您想要比较.textContent，它只查看呈现为用户可见的文本数据。
2021-04-20 16:28:02
@shevski - 我相信也可以对另一种情况进行排序，但是您必须显示 HTML 并描述您希望它按什么排序。
2021-05-05 16:28:02
@Mike'Pomax'Kamermans - 是的，这取决于 OP 他们想要排序的内容，但.textContent确实是一个不错的选择。
2021-05-07 16:28:02
你可以为不同 <div> 下的对象做这样的事情吗？
2021-05-12 16:28:02

一个自定义的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;
}

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

您可以改用 localeCompare 使事情变得更加优雅和可行。

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

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

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

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

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

而已！

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

其它你可能感兴趣的问题
上一篇我是否需要关注异步 Javascript 的竞争条件？ 下一篇使用 JavaScript 编辑 CSS 渐变