Javascript 使用.sort（）和.data（）对IE11和Edge中的HTML元素进行排序

我用这个问题（）在我正在做的一个项目上完成了很多工作

得票最多的答案提到使用jQuery；如果我需要它在IE10及以下版本中工作，则需要s

.data（）

。我没有在这些浏览器中测试过它，但我发现它在IE11或Edge中不起作用

以下是在Chrome中运行良好的JSFIDLE：

HTML

<div class="clist">
    <div data-sid=1>1</div>
    <div data-sid=4>4</div>
    <div data-sid=3>3</div>
    <div data-sid=1>1</div>
    <div data-sid=4>4</div>
    <div data-sid=2>2</div>
    <div data-sid=1>1</div>
</div>

你可以用

$('.clist div').sort(function(a,b) {
     return $(a).attr('data-sid') > $(b).attr('data-sid') ? 1 : -1;
}).appendTo('.clist');

---

排序功能不好；我不知道为什么它适用于任何其他浏览器。工作区：

排序函数应返回一个数字，而不是布尔值：

$('.clist div').sort(function(a,b) {
     return parseInt($(a).data('sid'), 10) - parseInt($(b).data('sid'), 10);
}).appendTo('.clist');

---

没有jQuery，您可以非常轻松地对HTML元素进行排序。只需使用内置的

document.queryselectoral

函数选择HTML元素的集合（作为节点列表），然后使用内置的

Array.prototype.sort.apply（YourCollection[SortFunction]）

在节点列表上调用数组对象的

sort

函数

var nodes=document.querySelectorAll（“.clist[data sid]”）；
Array.prototype.sort.apply（节点，
[功能（第一、第二）{
var a=+first.getAttribute（“数据sid”），
b=+second.getAttribute（“数据sid”）；
返回a>b1：（a

[数据sid]{
边框：1px纯黑；
}
[数据sid=“1”]{
背景色：rgb（255、250、250）；
}
[数据sid=“2”]{
背景色：rgb（255200200）；
}
[数据sid=“3”]{
背景色：rgb（255、100、100）；
}
[数据sid=“4”]{
背景色：rgb（255,50,50）；
}

1.
4.
3.
1.
4.
2.
1.

这在IE11和Edge中不起作用？您能解释一下它是如何失败的吗？就像它根本不排序一样，有错误消息吗？对我来说它根本不排序。控制台中没有错误消息或任何东西。你在IE11和Edge中测试过吗？看起来IE可以处理缺少的引号；这只是排序功能，特别是绊倒了它。基本上你没有改变任何东西。在这种情况下，引号是可选的，

在幕后处理数字转换。属性的格式没有错误。是的，将其更改为减法确实有帮助，因为compareFunction需要一个整数，但它并不能真正回答问题。@dfsq:请仔细查看。@dfsq:排序函数应返回-1、0或1以指示排序。仅仅因为JS可以将布尔值转换为数字并不意味着排序函数是正确的。

$('.clist div').sort(function(a,b) {
     return parseInt($(a).data('sid'), 10) - parseInt($(b).data('sid'), 10);
}).appendTo('.clist');