如何使用jQuery隐藏表中具有特定类的最后一个表行

Question

我有一个包含一系列具有以下结构的表的页面

<table>
 <thead>
   <tr>
     <th>2</th>
     <th>Position</th>
     <th>Names</th>
   </tr>
</thead>
<tbody>
 <tr class="station-12 odd"><td>12</td><td>AO</td><td id="2-1-12-am">Name goes here</td> </tr>
 <tr class="station-12 even"><td></td><td>FF</td><td id="2-2-12-am">Name goes here</td> </tr>
 <tr class="station-12 odd"><td></td><td>PFF</td><td id="2-3-12-am">Name goes here</td> </tr>
 <tr class="separator even"><td colspan="3"></td> </tr>
 <tr class="station-13 odd"><td>13</td><td>AO</td><td id="2-1-13-am">Name goes here</td> </tr>
 <tr class="station-13 even"><td></td><td>FF</td><td id="2-2-13-am">Name goes here</td> </tr>
 <tr class="station-13 odd"><td></td><td>PFF</td><td id="2-3-13-am">Name goes here</td> </tr>
 <tr class="separator even"><td colspan="3"></td> </tr>
 <tr class="station-18 odd"><td>18</td><td>AO</td><td id="2-1-18-am">Name goes here</td> </tr>
 <tr class="station-18 even"><td></td><td>FF</td><td id="2-2-18-am">Name goes here</td> </tr>
 <tr class="station-18 odd"><td></td><td>PFF</td><td id="2-3-18-am">Name goes here</td> </tr>
 <tr class="separator even"><td colspan="3"></td> </tr>
 <tr class="station-19 odd"><td>19</td><td>AO</td><td id="2-1-19-am">Name goes here</td> </tr>
 <tr class="station-19 even"><td></td><td>FF</td><td id="2-2-19-am">Name goes here</td> </tr>
 <tr class="station-19 odd"><td></td><td>PFF</td><td id="2-3-19-am">Name goes here</td> </tr>
</tbody>
</table>

此结构存在于日历类型的页面上，其中一个月中的每一天都有一张表格。 我有一些使用选择列表和按钮过滤显示行的工作代码。

  $('form#my-form').submit(function(context, settings) {
    // First, display any rows that are hidden.
    $('table#my-table tbody tr :hidden').show();
    // Get items not selected in select list and hide them.
    $('select#edit-stations').find('option').not(':selected').each(function(i, option) {
      var station_id = $(this).val();
      var station_class = '.station-' + station_id;
      $(station_class).hide().parent().find('.separator').last().hide();
    });

    // Keep form from being submitted.
    return false;

  });

隐藏部分的工作原理很像。 我遇到的问题是尝试隐藏最后一个station-x行之后的最后一个分隔符行。 例如，如果我隐藏了station-18和station-19行，那么我也想隐藏在station-13行之后的.separator行。 如您在我的代码中看到的那样，我的想法是遍历父元素（在本例中为<tbody> ），找到所有<tr class="separator">元素并将其隐藏，但这是行不通的。 如果我在该行上放置一个断点并在控制台中输入$(station_class).hide().parent() ，我只会得到一个空数组，因此显然我没有错误地使用.parent（）。 我也尝试过.closest() ，但是没有运气。

我关闭了吗，或者有更好/更轻松的方式来做我想做的事情？

谢谢。

Answer 1

重新检查您的代码后，我注意到您的语法有问题。 具体来说，这条线

$(station_class).hide().parent().find('.separator').last().hide();

应该更改为

$(station_class).parent().find('.separator').last().hide();

您两次调用hide()方法。

Answer 2

尝试与siblings()

$(station_class).hide().siblings('.separator').last().hide();

更新：

您也可以尝试使用单独的行代码。

var sep = $(station_class).hide();
sep.siblings('.separator').last().hide();

Answer 3

我会这样做：

每个站点（第一个站点除外）生成之前

<tr class="separator station-nn"><td colspan="3"></td> </tr>

其中nn =下一个站的站号。

然后，在关闭工作站时，只需关闭分隔符行。

。换句话说每个站都有前述它，即与该站相关联的分离器。 当然除了第一站...

Answer 4

尝试next（）看起来很简单而且动态

$（'。station-18'）。hide（）。next（'。separator'）。hide（）

请尝试下面的演示。

 $(document).ready(function() { setTimeout(function() { $('.station-12').hide().next('.separator').hide(); }, 1000); setTimeout(function() { $('.station-13').hide().next('.separator').hide(); }, 2000); setTimeout(function() { $('.station-18').hide().next('.separator').hide(); }, 3000); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <table> <thead> <tr> <th>2</th> <th>Position</th> <th>Names</th> </tr> </thead> <tbody> <tr class="station-12 odd"> <td>12</td> <td>AO</td> <td id="2-1-12-am">Name goes here</td> </tr> <tr class="station-12 even"> <td></td> <td>FF</td> <td id="2-2-12-am">Name goes here</td> </tr> <tr class="station-12 odd"> <td></td> <td>PFF</td> <td id="2-3-12-am">Name goes here</td> </tr> <tr class="separator even"> <td colspan="3"></td> </tr> <tr class="station-13 odd"> <td>13</td> <td>AO</td> <td id="2-1-13-am">Name goes here</td> </tr> <tr class="station-13 even"> <td></td> <td>FF</td> <td id="2-2-13-am">Name goes here</td> </tr> <tr class="station-13 odd"> <td></td> <td>PFF</td> <td id="2-3-13-am">Name goes here</td> </tr> <tr class="separator even"> <td colspan="3"></td> </tr> <tr class="station-18 odd"> <td>18</td> <td>AO</td> <td id="2-1-18-am">Name goes here</td> </tr> <tr class="station-18 even"> <td></td> <td>FF</td> <td id="2-2-18-am">Name goes here</td> </tr> <tr class="station-18 odd"> <td></td> <td>PFF</td> <td id="2-3-18-am">Name goes here</td> </tr> <tr class="separator even"> <td colspan="3"></td> </tr> <tr class="station-19 odd"> <td>19</td> <td>AO</td> <td id="2-1-19-am">Name goes here</td> </tr> <tr class="station-19 even"> <td></td> <td>FF</td> <td id="2-2-19-am">Name goes here</td> </tr> <tr class="station-19 odd"> <td></td> <td>PFF</td> <td id="2-3-19-am">Name goes here</td> </tr> </tbody> </table>