Question

我有一个包含不同类名的行的表。其中一些行具有相同的类名。我试图选择包含特定类的下一个表行（使用jQuery）。基本上，我正在尝试创建一个功能，用户可以使用箭头键选择表格中的下一行。这是我正在使用的代码：

if (e.keyCode == 40)
{ 
   $('tr.background_color_grey').next("tr").addClass("background_color_grey");
   $('tr.background_color_grey:first').removeClass("background_color_grey");
   return false;
}

问题是我需要跳过一些行（它们作为表中不同类别的标题）。那么，如果它有一个特定的类，我如何选择表中的下一行？我想要选择的所有行都有“can_be_selected”类。谢谢你的帮助！

Answer 1

使用.next("tr")

尝试.next("tr.can_be_selected")

Answer 2

一种选择是使用nextUntil方法跳过所有“无用”行：

$("tr").eq($("tr.selected").nextUntil(".can_be_selected").next().index());

DEMO： http://jsfiddle.net/y8Dqq/

Answer 3

这样的事情怎么样 jsFiddle example ？

该示例有一个包含一列和10行的表。单元格是<td>个元素，其中所选单元格具有类can_be_selected。通过使用向上和向下箭头键，您可以突出显示类can_be_selected的单元格，仅忽略其他单元格。请注意，在示例中，我为类can_be_selected的单元格赋予了绿色边框，使它们不同，但您可以轻松删除它。

这是 second jsFiddle example ，使用相同的代码，其中表格行已替换为表格单元格。

jQuery （对于第一个jsFiddle示例）：

var index = -1;
//38 up, 40down
$(document).keydown(function(e) {
    if (e.keyCode === 40) {
        index = (index + 1 >= $('td.can_be_selected').length) ? $('td.can_be_selected').length - 1 : index + 1;
        $('td.can_be_selected').removeClass('background_color_grey');
        $('td.can_be_selected:eq(' + index + ')').addClass('background_color_grey');
        return false;
    }
    if (e.keyCode === 38) {
        index = (index == 0) ? 0 : index - 1;
        $('td.can_be_selected').removeClass('background_color_grey');
        $('td.can_be_selected:eq(' + index + ')').addClass('background_color_grey');
        return false;
    }
});

如何使用jQuery选择具有特定类的下一个表行？

3 个答案: