How to hide last table row with specific class in table with jQuery

Question

I have a page with a series of tables with the following structure

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

This structure exists on a calendar-type page where there is one table of these for each day in a month. I have some working code that uses a select list and button to filter the displayed rows.

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

  });

The hiding part works like a charm. The issue I'm having is trying to also hide the last separator row that follows the last station-x row. For instance, if I hide all of the station-18 and station-19 rows, I also want to hide the .separator row that immediately follows the station-13 rows. As you can see in my code, my thought was to traverse up to the parent element ( <tbody> in this case), find all the <tr class="separator"> elements, and hide them, but it's not working. if I put a breakpoint at that line and enter $(station_class).hide().parent() in the console, I just get an empty array, so apparently I'm not using .parent() incorrectly. I've also tried .closest() with no luck.

Am I close, or is there a better/easier way to do what I'm trying to do?

Thanks.

Answer 1

After re-examining your code, I noticed a problem with your syntax. Specifically, this line

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

should be changed to

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

You were calling the hide() method twice.

Answer 2

Try with siblings()

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

Update:

You can try with separate line code also.

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

Answer 3

I would do this:

before each station (except the first) generate

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

where nn = the station # of the following station.

Then you simply switch off the separator row when you switch off the station.

In otherwords each station has preceeding it, a separator that is associated with that station. Except the first station of course...

Answer 4

Try with next() It may looks so simple and dynamic way

$('.station-18').hide().next('.separator').hide()

Try the demo below.

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