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).parent().find('.separator').last().hide();

应改为

hide()

您正在调用{{1}}方法两次。

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（）它可能看起来如此简单和动态

$（ '站-18 '）。隐藏（）。下一个（'。分离器'）。隐藏（）

试试下面的演示。

$(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>

如何使用jQuery

4 个答案: