Jquery: adding a selector to an already selected object

Question

Greetings,

By using the regular selector, I am able to select the grand parent of an input text field (which is a element actually), and via .next() I selected the next row.

var nextOne = $(this).parent().parent().next();

From this next ro, I want to select the an input text field which is a ".foo", which is a grandchild of this row.

How can this be achieved?

Edit: Each row is in such html format:

<tr>
    <td  ><input alt="time" type="text" class="timefield start_time"/></td>
    <td  ><input alt="time" type="text" class="timefield end_time"/></td>
    <td  ><input type="text" class="programnamefield"/></td>                
</tr>

---

And the method that chekcs if an end_time field is filled, if so, change the start_time of the next row as the end_time of the previous. And vice versa.

function autoCompleteTimes(){
    $('.end_time').change(function(){
        var nextOne = $(this).parent().parent().next();
// TODO
        });  
}

Answer 1

you can use find method (if the input.foo is deep in dom tree) or children (if is one level deep) with selector

nextOne.find('.foo');

or

nextOne.children('.foo');

to change times of nex row input field

var end_time = nextOne.find('.end_time').val()
if (end_time != '') {
   // end_time is filled
   nextOne.next().find('.start_time').val(end_time);
}

Answer 2

By applying the grandparent/next row object you have selected as the scope

var nextOne = $(this).parent().parent().next();

var nextFoo = $('.foo', nextOne);