为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

PHP
胡子哥哥 2023-04-28 16:32:36
我正在开发一个等待时间 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)});这很好用,但正如您在下图中看到的那样,“已关闭”和“翻新”等文本值位于表格顶部,高于最长等待时间。我如何更改表格的顺序以获得表格顶部的最长等待时间,最后是文本值?当前订单,想要更改此所以我想得到:20 min.15 min.5 min.OpenClosedRefurbishment
查看完整描述

1 回答

?
BIG阳

TA贡献1859条经验 获得超6个赞

要根据需要进行排序,您需要根据值是否为数字进行不同的排序。如果两者都是数字,请像您目前所做的那样进行比较。否则,如果只有一个是数字,则将其排序到开头;如果两者都不是数字,则根据您需要的顺序 ( 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>


查看完整回答
反对 回复 2023-04-28
  • 1 回答
  • 0 关注
  • 110 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信