javascript - Jquery排序表 ->文本前的数字

Question

我正在开发一个等待时间 API，以显示迪士尼公园的当前排队时间。
等待时间按字母顺序加载到表中。

现在，我使用以下代码将该表在表顶部的最高等待排序到最低等待。这就是我想要的:

$(document).ready(function(){
var sorted = $('#mytable tbody tr').sort(function(b, a) {
  var a = $(a).find('td:last').text(), b = $(b).find('td:last').text();
  return a.localeCompare(b, false, {numeric: true})
})

$('#mytable tbody').html(sorted)
});

这很好用，但是正如您在下图中看到的那样，“已关闭”和“翻新”等文本值位于表格顶部，高于最高等待时间。

如何更改表格的顺序以获得表格顶部的最高等待时间以及最后的文本值？

Current order, want to change this

所以我想得到:

20 min.
15 min.
5 min.
Open
Closed
Refurbishment

Answer 1

要根据需要进行排序，您需要根据值是否为数字进行不同的排序。如果两者都是数字，请按照您当前的做法进行比较。否则，如果只有一个是数字，则将其排序到开头；如果两者都不是数字，则根据您需要的顺序( Open ， Closed ， Refurbishment )进行排序，这可以通过在定义排序顺序的对象中查找短语来实现:

var states = {
  'Open': 0,
  'Closed': 1,
  'Refurbishment': 2
};

$(document).ready(function() {
  var sorted = $('#mytable tbody tr').sort(function(b, a) {
    var a = $(a).find('td:last').text(),
      b = $(b).find('td:last').text();
    if (!isNaN(parseInt(a))) {
      if (!isNaN(parseInt(b))) {
        // a and b both numeric
        return a.localeCompare(b, false, {
          numeric: true
        });
      } else {
        // a numeric, b not, sort b last
        return 1;
      }
    } else if (!isNaN(parseInt(b))) {
      // a not numeric, b numeric, sort a last
      return -1;
    } else {
      // a not numeric, b not numeric, sort regular
      return states[b] - states[a];
    }
  });
  $('#mytable tbody').html(sorted)
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="mytable">
  <tbody>
    <tr>
      <td>Challenge trails</td>
      <td>Refurbishment</td>
    </tr>
    <tr>
      <td>Camp Discovery</td>
      <td>Open</td>
    </tr>
    <tr>
      <td>Soaring</td>
      <td>120 mins</td>
    </tr>
    <tr>
      <td>Fantasia</td>
      <td>20 mins</td>
    </tr>
    <tr>
      <td>Shipwreck Shore</td>
      <td>5 mins</td>
    </tr>
    <tr>
      <td>Rex's Racer</td>
      <td>105 mins</td>
    </tr>
    <tr>
      <td>Slinky Dog</td>
      <td>Closed</td>
    </tr>
  </tbody>
</table>