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

Posted 2023-02-25

【中文标题】如何使用 jQuery 选择具有特定类的下一个表行？

【英文标题】：How do I use jQuery to select the next table row with a particular class?

【发布时间】：2012-05-07 21:21:13

【问题描述】：

我有一个表，其中包含具有不同类名的行。其中一些行具有相同的类名。我正在尝试选择包含特定类的下一个表行（使用 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”类。感谢您的帮助！

【问题讨论】：

那么您只是想使用键盘突出显示一行，跳过标题行吗？

是的。我有一个包含一列的表。有些行是标题。突出显示需要跳过这些行。我仍然无法弄清楚如何做到这一点。任何帮助将不胜感激。

【参考方案1】：

在你使用.next("tr")

试试.next("tr.can_be_selected")

【讨论】：

我不会不同意，只是回答他的核心问题而不是优化代码。

next("tr.can_be_selected") 没用？如果不是，请发布您的 html，因为它就像一个冠军！

【参考方案2】：

这样的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;
    
);​

【讨论】：

非常感谢您的帮助！此代码用于基本搜索功能。如果我进行搜索并向下箭头到第二行，然后在搜索区域之外单击，结果就会消失（如我所愿）。到现在为止还挺好。但是，当我回去进行另一次搜索，然后按向下箭头时，它会突出显示第 3 行，就好像它记得我之前向下箭头到第 2 行的搜索一样。我该如何解决这个问题？

听起来你只需要在你拥有的代码中添加一些代码，在我的示例中单击表格外部时将结果变为空白，以便它将索引变量重置为 -1。

【参考方案3】：

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

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

演示： http://jsfiddle.net/y8Dqq/