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的工作原理。

编辑：Matt的回答可能比做.parent().parent()

更具语法意义

在jQuery中选择类中的下一个实例

2 个答案: