Help with jQuery selector

Question

I've got a table structured as follows with 10 rows:

<table>
    <tr id='row1'>
        <td>
            <input id='input1' type='text' class='data'>
        </td>
    </tr>
    <tr id='row2' class='hide'>
        <td>
            <input id='input2' type='text' class='data'>
        </td>
    </tr>
    <tr id='row3' class='hide'>
        <td>
            <input id='input3' type='text' class='data'>
        </td>
    </tr>
    .
    .
    .
    (down to 10 rows)
 </table>

What I need to do is when the value in 'input(X)' changes to "show" 'row(X+1)'. I've been trying to figure out how to "ascend" back to the parent "tr" of the input field and then somehow get the "tr" of the next row, but I'm not having much success.

My 'hide' class is as follows:

.hide, { display:none; }

Thanks!

Answer 1

Use closest("tr") to navigate upwards to the table row that contains the input whose value has changed, then next to get the next row and finally show it:

$("input.data").change(function() {
    $(this).closest('tr').next().show();
});

You may want to take a look at all the tree traversal methods, they are very useful.