Jquery 排序为 table -> 文本前的数字

Question

我正在研究等待时间 API 以显示迪士尼乐园的当前排队时间。等待时间按字母顺序加载到 table 中。

现在我使用以下代码将此 table 排序为 table 之上的最高等待时间到最低等待时间。这就是我想要的：

$(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)
});

效果很好，但是正如您在下图中看到的，'Closed' 和 'Refurbishment' 等文本值位于 table 之上，高于最长等待时间。

我如何更改 table 的顺序以获得最长的等待时间 table 和最后的文本值？

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>

Jquery 排序为 table -> 文本前的数字

Jquery sort of table -> Numbers before text

html

javascript

php

jquery

jquery-ui