jquery selector needed to select all certain children of parent

Question

Hi, I have a page with some tables on it. In each table the first row is normal but the rest of the rows have a class of hidden so that they are not displayed on load. In one of the cells on the first row of the table there is a link to click to view more details (fade in the hidden rows of that table). I'm struggling to get this to work though. So basically I need a selector that will find all the hidden rows that are in the same table as the element that's clicked so that they can be faded in. I have used:

$(.hidden).fadeIn() 

but because there is more than one table on the page it fades in all the hidden rows in all of the tables, I just want the ones in the specific table. I also used:

$(this).closest('tr').next(".hidden").fadeIn("slow") 

which was half there, but it only fades in the first hidden row in that table but if there's more than one then the rest are still hidden. Any help would be much appreciated. Thanks

Answer 1

$('.hidden', $(this).closest('table')).fadeIn('slow');

This goes in the link's click event, so 'this' refers to that element.

Explanation: I'm looking for all the elements with class 'hidden' in the context of the first 'table' parent of the element clicked.

Answer 2

is that so, right?

<table>
<tr>
  <td><span class="show">View more details</span></td>
</tr>
<tr class="hidden">...</tr>
....
</table>

then

    <script type="text/javascript">
        $(document).ready(function() {
          $(".show").click(function() {
              $(this).closest('table').find('tr.hidden').fadeIn("slow");
          });
        });
   </script>

Answer 3

Try -

$(this).closest('tr').nextAll(".hidden").fadeIn("slow"); 

Detailed documentation of nextAll -

http://api.jquery.com/nextAll/