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

Question

使用jQuery，我试图根据具有焦点的控件在表中查找给定列的第一行。 下面的工作方式，但是它找到给定列的最后一行。 我希望它找到第一行。

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

我相信这将到达最后一行，因为使用了“ closest（）”方法，该方法从底部开始遍历所有元素。

最终使用的目的是使用箭头键浏览表格。 它基于这个有用的代码，有人可以分享： https : //gist.github.com/krcourville/7309218 。

编辑：根据要求添加其他更完整的jquery和html。

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>
<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

您可以使用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