javascript - 使用表 Jquery 在 div 中导航

Question

我尝试在表格中导航。没有 table 它可以工作，但是没有!这是代码:

<table>
<th><div class="section selected"><a href="#">E1</a></div></th>
<th><div class="section"><a href="#">E2</a></div></th>
<th><div class="section"><a href="#">E3</a></div></th>
</table>
<br />
<a href="javascript:;" id="button">CLICK</a>

然后

$('#button').click(function(){
$('.selected + .section, .section:eq(0)')
    .last().addClass('selected')
    .siblings('.selected').removeClass('selected');
});

CSS

.selected{background:red}

以及如何使用回车键触发链接？

谢谢!

Answer 1

这可能是你想要做的:

$('#button').click(function () {
    var selected = $('.section.selected');
    selected.removeClass('selected');
    var tbl = selected.closest("table");
    var th = tbl.find("th");
    var index = selected.closest("th").index();
    if(index < th.length-1) index++;
    else index=0;

    tbl.find(".section:eq(" + index + ")").addClass('selected');
});

这是工作 DEMO .

问题 在您的代码中使用了 jQuery siblings 函数，它遍历同一 DOM 级别的所有节点兄弟，例如，如果您有:

<table>
    <th>
        <div class="section selected"><a href="#">E1</a>
        </div>
        <div class="section"><a href="#">E1 Sibling</a>
        </div>
    </th>
</table>

然后 sibling 函数将选择 E1 Sibling 节点，但 html 中的 .section 节点都不是兄弟节点。