Question

I have a grid. In a each cell in a column in the grid, there is a text box. Next to each text box is a button. Attached to the button is a click event handler (jQuery .click()) What I want to do is when the user clicks the button, I want to fetch the value of the text box immediately next to it. There are multiple rows in the grid. Each row how a text box and a button.

I know how to use jQuery to fetch an individual, or group of items (using selectors). I also know how to attach the click event handler to all the buttons.

But what are some good ways to reference the text box next to the button — aside from “walking the DOM” (i.e. using .parent() or .next())0

Answer 1

An easy way to do it would be to get the TR then find the input from there:

$(this).closest('tr').find('input');