如何从下一行获取与当前TD相同索引的TD

Question

I have a large HTML table where all rows of the body have the same structure.

Within this table there are editable TDs (which have the class " editable " and contain a contenteditable div) and non-editable TDs (which dont't have the class " editable " and do not contain a div).

Now I am trying to get the TD from the next row that has the same index as the current (closest) TD .

The below code gives me the correct index of my current TD within its row (and looking only at editable TDs).

Can someone tell me how I can get the equivalent TD of the next row ?

My jQuery:

$(document).keydown(function(e) {
    var current = $(e.target);
    var editables = $(current).closest('tr').find('td.editable');
    var count = editables.length;
    alert( editables.index($(current).closest('td')) ); // for testing
    // ...
});

Instead of the alert I am looking for something like the following:

$(current).closest('tr').next('tr').find( /* the td with class editable AND the index matching the above */ );

Example:
If I am currently on the 4th editable TD in a row I would then need the 4th editable TD in the next row.

Answer 1

Try using :eq() like

$(document).keydown(function(e){
    var current = $(e.target);
    var editables = current.closest('tr').find('td.editable');
    var count = editables.length;
    var index = editables.index(current.closest('td')); 
    current.closest('tr').next('tr').find('td:eq('+index+')');
});

As commented above, you can use current instead of $(current)