Question

Im trying to get a form element value using closest. Here some example code.

<table>
  <tr>
    <td>Hour <input type="input" value="12" name="data[hour]" class="hour" /></td>
    <td>Minute <input type="input" value="12" name="data[minute]" class="minute" /></td>
    <td><a href="#" class="add-data">Add Row</a></td>
  </tr>
</table>

See I cant serialize the form because it is part of a large form so I need to grab each input closest to the add row link as yo will be able to add multiple rows.

I have tried

var hour = $(this).closest('.hour').val();    
var hour = $(this).closest('input', '.hour').val();
var hour = $(this).closest('input[name="data[hour]]").val();

Any ideas how I can get the form values ?

Thanks in advance

Answer 1

Assuming you have just one .hour element per tr, this will do it:

var hour = $(this).closest('tr').find('.hour').val();

closest will:

Get the first ancestor element that
matches the selector, beginning at the
current element and progressing up
through the DOM tree.

So, you need to go up to the tr, and from there find the .hour descendant.