jQuery 排序和 appendTo 在 Internet Explorer 和 Safari 中不起作用

Question

我正在使用 jQuery sort 和 appendTo 函数根据内容重新排序 span 标签列表。

它应该很简单，在 Firefox 和 Chrome 中运行良好，但在 Windows 上的 Internet Explorer 11 和 Safari 5 中无法运行，我找不到原因。

HTML：

<div class="ube-all">
   <div class="ube-article">
     <span>bbbb</span>
   </div>
   <div class="ube-article">
     <span>aaaaa</span>
   </div>
   <div class="ube-article">
     <span>ccc</span>
   </div>
</div>

jQuery 脚本：

$(document).ready(function() {
  $('.ube-all .ube-article').sort(function(a,b){
    return $.trim($(a).find('span').eq(0).text())>$.trim($(b).find('span').eq(0).text());
  }).appendTo('.ube-all');
});

这里有一个 jsFiddle：

https://jsfiddle.net/nxsby7rs/

有什么想法吗？

Answer 1

数组排序方法回调函数应该返回负数、正数或0 的整数，而不是从> 运算符获得的布尔值。

编写排序函数的正确方法是比较字符串，然后根据比较返回一个整数。

工作示例：

$(document).ready(function() {
  $('.ube-all .ube-article').sort(function(a,b){
    var stra = $.trim($(a).find('span').eq(0).text());
    var strb = $.trim($(b).find('span').eq(0).text());
    if (stra < strb) { return -1; }
    if (stra > strb) { return 1; }
    return 0;
  }).appendTo('.ube-all');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div class="ube-all">
   <div class="ube-article">
     <span>bbbb</span>
   </div>
   <div class="ube-article">
     <span>aaaaa</span>
   </div>
   <div class="ube-article">
     <span>ccc</span>
   </div>
</div>

由于排序函数需要整数，所以真正的问题似乎是：

为什么这段代码在某些浏览器中完全有效？

不同的浏览器使用不同的排序算法。有可能使用一些排序算法，可以将true 类型转换为正的1 和false 到0 并获得有意义的结果。然而，这是在未定义行为的领域，应该避免。