Question

我尝试在表格中导航。没有桌子它可以工作，但没有！这是代码：

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

如何使用Enter键触发链接？

谢谢！

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>

然后兄弟函数会选择E1 Sibling节点，但是你的html中没有.section个节点是兄弟节点。

使用表Jquery在div中导航

1 个答案: