jQuery第一个子项第n个子项

下面是当前代码，用于突出显示鼠标所在html表的顶行和日期以及单元格。我对jQuery还是很陌生，还没有很好地掌握第一个孩子/n个孩子。我不想突出显示项目，而是要突出显示产品名称（列中第二个向下）。我知道我必须为第一个子N子编辑addClass和removeClass行，但我不确定如何突出显示当前突出显示的单元格下方的单元格。提前感谢您的帮助

$（“td”）.hover（函数（）{
$（this）.addClass（'highlight'）.sides（）.first（）.addClass（'highlight'）；
$（'tr:first child th:n child（'+（$（this.index（）+1）+'））.addClass（'highlight'）；
}，函数（）{
$（this）.removeClass（“highlight”）.sides（）.first（）.removeClass（“highlight”）；
$（'tr:first child th:n child（'+（$（this.index（）+1）+'））.removeClass（'highlight'）；
});
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
字体大小：90%；
}
th，td{
填充：8px；
}
运输署{
文本对齐：居中；
}
桌子{
保证金：0自动；
}
运输署：点击{
背景颜色：蓝色；
}
.亮点{
背景色：#E0；
颜色：蓝色；
}

项目#1234567754321产品22oz深黑色12ct 4oz深黑色2016-01-01978524782016-01-02875421362016-01-031358722032016-01-041411132972016-01-051321231012016-01-061635329912016-01-07154213100
见以下代码。您只需使用
prev（）
，它就会突出显示prevous
td


$（“td”）.hover（函数（）{
$（this）.addClass（'highlight'）.sides（）.first（）.addClass（'highlight'）；
$（'tr:nth child（n+2）th:eq（'+$（this.index（）+'））.addClass（'highlight'）；
}，函数（）{
$（this）.removeClass（'highlight'）.sides（）.first（）.removeClass（'highlight'）；
$（'tr:nth child（n+2）th:eq（'+$（this.index（）+'））.removeClass（'highlight'）；
});
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
字体大小：90%；
}
th，td{
填充：8px；
}
运输署{
文本对齐：居中；
}
桌子{
保证金：0自动；
}
运输署：点击{
背景颜色：蓝色；
}
.亮点{
背景色：#E0；
颜色：蓝色；
}

项目#1234567654321产品22oz Dark12ct 4oz Dark2016-01-01978524782016-01-02875421362016-01-031358722032016-01-041411132972016-01-051321231012016-01-06163532992016-01-07154213100
您只需稍微更新jQuery选择器，以表的第二行而不是第一行为目标：

$("td").hover(function(){

    $(this).addClass('highlight').siblings().first().addClass('highlight');

    $('tr:nth-child(2) th:nth-child(' + ($(this).index() + 1) + ')').addClass('highlight');


},function(){

    $(this).removeClass("highlight").siblings().first().removeClass('highlight');

    $('tr:nth-child(2) th:nth-child(' + ($(this).index() + 1) + ')').removeClass('highlight');

});

我更新了您的jQuery代码，使其更干净，并修复了您的问题

为此，我使用了内部jQuery函数，如
.eq（）
（工作原理类似于CSS
：nth child
）来解决这个问题

$("td").hover(function(){
    $(this).addClass('highlight').siblings().first().addClass('highlight');
    $('tr').eq(1).children('th').eq($(this).index()).addClass('highlight');


},function(){
    $(this).removeClass("highlight").siblings().first().removeClass('highlight');
    $('tr').eq(1).children('th').eq($(this).index()).removeClass('highlight');

});

我想突出显示产品名称（列中第二个）

我认为下面的代码片段就是您想要的，您可以使用来实现这一点：

//Add the highlight using 
$('tr:eq(1) th:eq('+$(this).index()+')').addClass('highlight');

//Then remove the highlight using 
$('tr:eq(1) th:eq('+$(this).index()+')').removeClass('highlight');

tr:eq（1）
将获得第二行，因为
:eq（）
是基于0的，
th:eq（'+$（this）.index（）+'）
将基于悬停的
td
索引选择第一行或第二行
th

希望这有帮助


$（“td”）.hover（函数（）{
$（this）.addClass（'highlight'）.sides（）.first（）.addClass（'highlight'）；
$（'tr:first child th:n child（'+（$（this.index（）+1）+'））.addClass（'highlight'）；
$（'tr:eq（1）th:eq（'+$（this）.index（）+'））.addClass（'highlight'）；
}，函数（）{
$（this）.removeClass（“highlight”）.sides（）.first（）.removeClass（“highlight”）；
$（'tr:first child th:n child（'+（$（this.index（）+1）+'））.removeClass（'highlight'）；
$（'tr:eq（1）th:eq（'+$（this.index（）+'）））.removeClass（'highlight'）；
});
表，th，td{
边框：1px纯黑；
边界塌陷：塌陷；
字体大小：90%；
}
th，td{
填充：8px；
}
运输署{
文本对齐：居中；
}
桌子{
保证金：0自动；
}
运输署：点击{
背景颜色：蓝色；
}
.亮点{
背景色：#E0；
颜色：蓝色；
}

项目#1234567654321产品22oz深12ct 4oz深21k016-01-01978524782016-01-02875421362016-01-031358722032016-01-041411132972016-01-051321231012016-01-061635329912016-01-07154213100
这是不正确的，我知道需要对第一个子行/n个子行进行更改。您对突出显示产品日期的行进行了更改。运行上面你发布的代码，你就会明白我的意思。鼠标放在单元格上，日期和产品名称应该突出显示。@Brandon是的，现在我已经更改了，它的工作方式符合您的要求requirement@BharatPatidar你的代码实际上还是错的。只需单击运行代码片段，您就会很容易看到它工作不正常。上面的其他人已经帮我解决了问题。谢谢你的帮助，扎卡里亚·阿查基！