jQuery从最近的方法中查找第一行

Question

Using jQuery, I'm trying to find the first row of a given column in a table based on the control that has focus. 使用jQuery，我试图根据具有焦点的控件在表中查找给定列的第一行。 The below kind of works, but it finds the last row of the given column. 下面的工作方式，但是它找到给定列的最后一行。 I want it to find the first row. 我希望它找到第一行。

var $next= $('input:focus').closest('table').find('td:nth-child(3)').find('input')

I believe this is going to the last row because of the use of the 'closest()' method which traverses through the elements starting from the bottom. 我相信这将到达最后一行，因为使用了“ closest（）”方法，该方法从底部开始遍历所有元素。

What this ultimately being used for is navigate through a table using the arrow keys. 最终使用的目的是使用箭头键浏览表格。 It's based on this helpful code someone was kind enough to share: https://gist.github.com/krcourville/7309218 . 它基于这个有用的代码，有人可以分享： https : //gist.github.com/krcourville/7309218 。

EDIT: Adding additional fuller jquery and html as requested. 编辑：根据要求添加其他更完整的jquery和html。

jQuery (stripped down version): jQuery（精简版）：

<script>
$('table.arrow-nav').keydown(function(e){
    switch(e.which){
        case //... other cases for other keycodes ...
        case e.ctrlKey && 38: // <ctrl> + <Up>
            $next = $('input:focus').closest('tr').parent().find("tr:first").find('td:nth-child(3)').find('input');
            break;
    }
    if($next && $next.length){
        $next.focus();
    }
});
</script>

HTML: HTML：

<html>
<head></head>
<body>
    <table class="arrow-nav" border="1" cellpadding="2" cellspacing="2">
    <tr>
        <th>ID</th>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    <tr>
        <td><input id="ctl_1_1" type="text"></td>
        <td><input id="ctl_2_1" type="text"></td>
        <td><input id="ctl_3_1" type="text"></td>
        <td><input id="ctl_4_1" type="text"></td>
    </tr>
    <tr>
        <td><input id="ctl_1_2" type="text"></td>
        <td><input id="ctl_2_2" type="text"></td>
        <td><input id="ctl_3_2" type="text"></td>
        <td><input id="ctl_4_2" type="text"></td>
    </tr>
    <tr>
        <td><input id="ctl_1_3" type="text"></td>
        <td><input id="ctl_2_3" type="text"></td>
        <td><input id="ctl_3_3" type="text"></td>
        <td><input id="ctl_4_3" type="text"></td>
    </tr>
</table>
</body>
<html>

Answer 1

这样尝试

$('input:focus').closest('tr').parent().find("tr:nth-child(2)").find('td:nth-child(3)').find('input')

Answer 2

You can use the ids for referencing each row: 您可以使用ID引用每一行：

 $(function() { $('input').on('focus', function(event) { var foc = $(this).attr('id'); var ctl = parseInt(foc.charAt(6), 10); var next = $('tr')[ctl]; if (next === $('tr')[2]) { next = $('tr')[0]; } console.log('Focused input is ' + foc); console.log('The next row is ' + (ctl + 1)); }); });

 <!doctype html> <html> <head> <meta charset="utf-8"> <title>Next Row</title> </head> <body> <table class="arrow-nav" border="1" cellpadding="2" cellspacing="2"> <tr> <th>ID</th> <th>Name</th> <th>Age</th> <th>Gender</th> </tr> <tr> <td> <input id="ctl_1_1" type="text"> </td> <td> <input id="ctl_2_1" type="text"> </td> <td> <input id="ctl_3_1" type="text"> </td> <td> <input id="ctl_4_1" type="text"> </td> </tr> <tr> <td> <input id="ctl_1_2" type="text"> </td> <td> <input id="ctl_2_2" type="text"> </td> <td> <input id="ctl_3_2" type="text"> </td> <td> <input id="ctl_4_2" type="text"> </td> </tr> <tr> <td> <input id="ctl_1_3" type="text"> </td> <td> <input id="ctl_2_3" type="text"> </td> <td> <input id="ctl_3_3" type="text"> </td> <td> <input id="ctl_4_3" type="text"> </td> </tr> </table> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> </body> </html>

jQuery从最近的方法中查找第一行

问题描述

2 个解决方案

解决方案1
0 已采纳 2015-09-16 01:53:41

解决方案2
0 2015-09-16 04:32:14

jQuery从最近的方法中查找第一行

问题描述

2 个解决方案

解决方案1 0 已采纳 2015-09-16 01:53:41

解决方案2 0 2015-09-16 04:32:14

解决方案1
0 已采纳 2015-09-16 01:53:41

解决方案2
0 2015-09-16 04:32:14