Помогите с селектором jQuery

Question

У меня есть таблица с 10 строками:

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

Что мне нужно сделать, это когда значение в 'input (X)' изменится на строку "show" (X)+ 1)».Я пытался выяснить, как «подняться» обратно к родительскому «tr» поля ввода, а затем каким-то образом получить «tr» следующего ряда, но я не добился большого успеха.

Мой класс 'hide' выглядит следующим образом:

.hide, { display:none; }

Спасибо!

Answer 1

Используйте closest("tr"), чтобы перейти вверх к строке таблицы, содержащей входные данные, значение которых изменилось, затем next, чтобы получить следующую строку и, наконец, показать ее:

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

Возможно, вы захотите взглянуть на все методы обхода дерева , они очень полезны.