jQuery在td中找到下一个锚元素

Question

我有看起来像这样的HTML：

<table>
<tr>
    <td><a href="hello">Hello</a><div class="yo"></div></td>
    <td><a href="bye">Bye</a><div class="yo"></div></td>
</tr>

<tr>
    <td><a href="foo">Foo</a><div class="yo"></div></td>
    <td><a href="bar">Bar</a><div class="yo"></div></td>
</tr>
...
<!-- Rows continue on... -->

div有一个用于标签击键的侦听器，因此每当按下某个标签时，都应转到下一个链接。 （或者也许足以转到下一个td元素？）

例如，我单击“ Hello锚点，然后“ Bye锚点”应集中注意力。 如果我单击“ Bye锚，则“ Foo锚应集中注意力。

Answer 1

您可以获取单击链接的索引，然后在数组中的下一个元素上调用.focus() ：

var $links = $('table a');
$links.on('click', function() {
    $links.eq($links.index(this)+1).focus();
});

https://jsfiddle.net/qcbozbyn/1/

Answer 2

如何使用jQuery Next（）和prev（）方法

$("table tr td a").click(function(){
   var me = $(this) ;
    var nextElm = me.closest("td").next();
    if(nextElm.length>0){
        nextElm.find("a").css("color","green");
    }
    else{
        var prevElm = me.closest("td").prev();
        if(prevElm.length>0){
            prevElm.find("a").css("color","red");
        }
    }
});

JSfiddle链接： https ://jsfiddle.net/7fw2oeLm/