Как добавить класс к следующему тд на наведении ссылки в JQuery?

Question

у меня 6 тдс вот так:

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

И я хотел бы добавить класс после наведения на ссылку на следующий тд. Например. Если я наведу указатель мыши на ссылку со второго тд, у следующего тд будет класс, например 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

Это не только добавит класс при наведении курсора, но и удалит его при наведении курсора на ссылку.Это также работает, когда у вас есть другие теги на вашей странице.Не только те, кто внутри тд.

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

Answer 3

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

Вот скрипка