Jquery Closest From Element Value

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.