Question

当我使用数组排序功能对<ul>列表进行排序时，我得到了一个奇怪的结果。

代码在这里：

<style>
    ul, li{
      display:block;
      font-size:10px!important;
      white-space:nowrap!important;
    }
    ul{
      clear:both;
      overflow: hidden;
    }
    li{
      float: left;
      width: 80px;
      margin: 2px;
      overflow: hidden;
    }
    .sourceList{
      background: skyblue;
    }
    .changeList{
      background: pink;
    }
</style>

<ul class="sourceList">
  <li><span>87761</span></li>
  <li><span>87762</span></li>
  <li><span>87763</span></li>
  <li><span>87764</span></li>
  <li><span>87765</span></li>
  <li><span>87766</span></li>
  <li><span>87767</span></li>
  <li><span>87768</span></li>
  <li><span>87769</span></li>
  <li><span>877610</span></li>
  <li><span>877611</span></li>
  <li><span>877612</span></li>
  <li><span>877613</span></li>
  <li><span>877614</span></li>
</ul>

<ul class="changeList">
  <li><span>87761</span></li>
  <li><span>87762</span></li>
  <li><span>87763</span></li>
  <li><span>87764</span></li>
  <li><span>87765</span></li>
  <li><span>87766</span></li>
  <li><span>87767</span></li>
  <li><span>87768</span></li>
  <li><span>87769</span></li>
  <li><span>877610</span></li>
  <li><span>877611</span></li>
  <li><span>877612</span></li>
  <li><span>877613</span></li>
  <li><span>877614</span></li>
</ul>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    var t1 = $('.changeList li')
    t1.sort(function(a,b){
        return 0;
    });
    $('.changeList').html(t1);
</script>

我创建了两个<ul>，其中包含相同的内容。在第二个<ul>的子元素中使用sort函数后，我发现即使输入一个空函数参数，结果也已更改。

为什么会这样？

Answer 1

作为排序函数的结果返回零意味着元素彼此相等。由于您不了解基础排序算法，因此可以按任何顺序将元素提供给您的函数，只有结果才有意义。

由于你的函数表明所有元素都是相同的，它们可以在任何结果中出现（实际上，按照最适合底层排序算法的顺序）。

Answer 2

＆＃13;

<style>
    ul, li{
      display:block;
      font-size:10px!important;
      white-space:nowrap!important;
    }
    ul{
      clear:both;
      overflow: hidden;
    }
    li{
      float: left;
      width: 80px;
      margin: 2px;
      overflow: hidden;
    }
    .sourceList{
      background: skyblue;
    }
    .changeList{
      background: pink;
    }
</style>

<ul class="sourceList">
  <li><span>87761</span></li>
  <li><span>87762</span></li>
  <li><span>87763</span></li>
  <li><span>87764</span></li>
  <li><span>87765</span></li>
  <li><span>87766</span></li>
  <li><span>87767</span></li>
  <li><span>87768</span></li>
  <li><span>87769</span></li>
  <li><span>877610</span></li>
  <li><span>877611</span></li>
  <li><span>877612</span></li>
  <li><span>877613</span></li>
  <li><span>877614</span></li>
</ul>

<ul class="changeList">
  <li><span>87761</span></li>
  <li><span>87762</span></li>
  <li><span>87750</span></li>
  <li><span>87764</span></li>
  <li><span>87765</span></li>
  <li><span>87707</span></li>
  <li><span>87767</span></li>
  <li><span>87768</span></li>
  <li><span>87769</span></li>
  <li><span>877610</span></li>
  <li><span>877611</span></li>
  <li><span>877612</span></li>
  <li><span>877614</span></li>
  <li><span>877613</span></li>
</ul>

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
     $('.changeList').children().detach().sort(function(a, b) {
    return $(a).text() - ($(b).text());
  }).appendTo('.changeList');
</script>

＆＃13;

For sorting a list use following    

<script>
         $('.changeList').children().detach().sort(function(a, b) {
        return $(a).text() - ($(b).text());
      }).appendTo('.changeList');
    </script>

Answer 3

使用mergesort对连续的非数字类型数组进行字符串化和排序，如果可用（以获得稳定的排序）或qsort，如果没有可用的合并排序。

现在，在sort（）内部进行字符串化时，t1的所有元素都会给出“[object HTMLLIElement]”。这是因为你的jQuery选择器选择了DOM，而不是它们的值。

因此，不受欢迎的结果。

尝试运行此功能，您将得到答案。

var t1 = $('.changeList li');
var t2 = [];
for (i = 0; i < t1.length; i++) { 
    t2.push(t1[i].toString()); //this is what happens in sort() before initiating merger sort.
}
console.log(t2);

为什么数组排序函数在Javascript中返回更改的结果？

3 个答案: