Question

this question has probably been asked before, but i’m stuck and i’ve tried a lot of different filters and I can’t quite get the target that I need. I know it can be done, but i’m sort of confused with things like :first :next: parent() etc.

anyway, here’s my basic structure…

<tr>
    <td>06-22-2012</td>
    <td>11.00</td>
    <td>Whatever</td>
    <td><i>whatever</i><br /><br /><span class='leaveAComment'>Leave a comment</span></td>
    <td></td>
</tr>
<tr class='commentRow'>
    <td colspan=5>Comment:<input type='text'/><input type='submit'></td>
</tr>

when the span .leaveAComment is clicked, I want to toggle the visibility of the row .commentRow, which is initially hidden.

This is only a small section of a table. The closest i’ve gotten is $('tr').next('.commentRow').toggle();
but that toggles all the hidden rows, not just the next one.

any help would really be appreciated!

Answer 1

Try:

$(this).closest("tr").next().toggle();

Get the closest tr, get the next tr, toggle it.