Выбор следующего экземпляра в классе в jQuery

Question

У меня есть таблица с чередующимися строками названий курсов и описаний курсов. Вот некоторые из HTML (которые я перебираю):

<tr>
    <td><a class="course_name_click" href='#'><%= course.name %></a></td>
</tr>

<tr class="course_descrip" height="200">
    <td style="word-wrap: break-word" width="10"><%= course.descrip %></td>
</tr>

Я бы хотел, чтобы, когда пользователь нажимает на название курса, слайд описания курса переключался вверх и вниз. Но у меня возникают проблемы с поиском правильного селектора для описания курса, которое появляется сразу после нажатия на название курса. Я пробовал несколько различных комбинаций $ (this) и .next () , но никто, кажется, не работает. Вот мой JQuery до сих пор:

  $('.course_name_click').click(function() {
    $('tr.course_descrip').slideToggle('slow');
    return false;
  });

Как показано выше, нажатие на слайд с любым названием курса переключает каждый экземпляр tr.course_descrip. Я только хочу, чтобы слайд переключал экземпляр, который появляется после щелчка по названию курса.

Answer 1

$('.course_name_click').click(function() {
  $(this).closest('tr').next().slideToggle('slow');
  return false;
});

Answer 2

Это потому, что $(this).next() получает следующий брат из <a/>, по которому щелкнули, что является ничем. Вам нужно будет найти родителя его родителя (<tr/>) и сделать следующее:

$('.course_name_click').click(function() {
    $(this).parent().parent().next().slideToggle('slow');

    return false;
});

Вот jsFiddle , работающее.

Редактировать: Ответ Мэтта может иметь более синтаксический смысл, чем .parent().parent()