使用 .sort() 和 .data() 对 IE11 和 Edge 中的 HTML 元素进行排序答案

【问题标题】：Using .sort() and .data() to sort HTML elements in IE11 and Edge使用 .sort() 和 .data() 对 IE11 和 Edge 中的 HTML 元素进行排序
【发布时间】：2015-12-07 20:59:54
【问题描述】：

我使用这个问题 (jQuery sort elements using data id) 来完成我正在做的项目的大量工作。

投票最多的答案提到如果我需要它在 IE10 及更低版本中工作，则需要使用 jQuery;s .data()。我没有在这些浏览器中测试过它，但我发现它在 IE11 或 Edge 中不起作用。

这是我在 Chrome 中运行良好的 jsfiddle：http://jsfiddle.net/4o771n7o/

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>

Javascript

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

【问题讨论】：

这在 IE11 和 Edge 中无法运行？
你能解释一下它是如何失败的吗？就像它根本没有排序一样，是否有错误消息？
它根本不适合我。控制台中没有错误消息或任何内容。

标签： javascript jquery

【解决方案1】：

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

http://jsfiddle.net/0m75k1fm/

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

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

【讨论】：

看起来 IE 可以处理丢失的引号；只是 sort 函数专门让它出错。
基本上你没有改变任何东西。在这种情况下，引号是可选的，> 在幕后处理数字转换。
属性没有格式错误。是的，将其更改为减法确实有帮助，因为 compareFunction 需要一个整数，但它并不能真正回答问题。
@dfsq：仔细看。
@dfsq：排序函数应返回 -1、0 或 1 以指示排序。仅仅因为 JS 可以将 Boolean 转换为 Number 并不意味着排序函数是正确的。

【解决方案2】：

你可以使用

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

Works in edge

【讨论】：

你在 IE11 和 Edge 中测试过这个吗？

【解决方案3】：

您可以很容易地在没有 jQuery 的情况下对 HTML 元素进行排序。只需使用内置的 document.querySelectorAll 函数来选择您的 HTML 元素集合（作为节点列表），然后使用内置的 Array.prototype.sort.apply(YourCollection,[SortFunction]) 在您的节点列表上调用 Array 对象的 sort 函数。

var nodes = document.querySelectorAll(".clist [data-sid]");

Array.prototype.sort.apply(nodes,
[function(first, second) {
    var a = +first.getAttribute("data-sid"),
      b = +second.getAttribute("data-sid");
    return a > b ? 1 : (a < b ? -1 : 0);
  }]);

for (i = 0, len = nodes.length; i < len; i++) {
  document.querySelector(".clist").appendChild(nodes[i]);
}

[data-sid] {
  border: 1px solid black;
}
[data-sid="1"] {
  background-color: rgb(255, 250, 250);
}
[data-sid="2"] {
  background-color: rgb(255, 200, 200);
}
[data-sid="3"] {
  background-color: rgb(255, 100, 100);
}
[data-sid="4"] {
  background-color: rgb(255, 50, 50);
}

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

【讨论】：