javascript - 如何使用 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() 方法两次。