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有一个用于tab keydown的监听器，因此每当按下一个tab时它应该转到下一个链接。（或者它可能足以进入下一个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/

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

2 个答案: