如何在 jQuery 中将Class添加到链接悬停时的下一个td？

Question

我有 6 个这样的 td：

<td><a href="#">link</a></td>
<td>Some text here</td>

<td><a href="#">link</a></td>
<td>Some other text here</td>

<td><a href="#">link</a></td>
<td>Some other other text here</td>

我想在将鼠标悬停在下一个 td 的链接上后添加Class。例如，如果我将鼠标悬停在第二个 td 的链接上，则下一个 td 将具有一个类，例如 active ，如下所示

<td><a href="#">link</a></td>
<td>Some text here</td>

<td><a href="#">link</a></td> <!-- hoovering over this link -->
<td class="active">Some other text here</td> <!-- and this td will have class active-->

<td><a href="#">link</a></td>
<td>Some other other text here</td> 

如何执行此操作？

Answer 1

$('a').hover(function(){
    $(this).parent().next().addClass('someclass');
}, function(){
    $(this).parent().next().removeClass('someclass');
});

Answer 2

jQuery(function($){
    $("a").hover(function(){
       $(this).parent().next("td").addClass("active");
    });
});

这是小提琴

Answer 3

这不仅会在悬停时添加类，还会在您将鼠标悬停在链接之外时将其删除。当您的页面上有其他标签时它也适用。不仅仅是td里面的人。

$(document).ready(function() {
    $("td > a").hover(function() {
       $(this).parent().next("td").toggleClass("active");
    });
});