jquery - 使用 jQuery 选择基于类的表格单元格

Question

我有一个类似这样的布局:

<tr>
    <td class="topCategoryRow"><a href="javascript:void(0);" class="catlink">Some Category</a></td>
</tr>
<tr>
    <td class="subCategoryRow">A sub category under Some Category</td>
</tr>
<tr>
    <td class="subCategoryRow">Another sub category under Some Category</td>
</tr>
<tr>
    <td class="topCategoryRow"><a href="javascript:void(0);" class="catLink">Another Category</a></td>
</tr>
<tr>
    <td class="subCategoryRow">A sub category under Another Category</td>
</tr>
<tr>
    <td class="subCategoryRow">Another sub category under Another Category</td>
</tr>

我想做的是在 catLink 类上附加一个点击处理程序。我希望能够选择 topCategoryRows 下的 subCategoryRows:

<script type="text/javascript">
    $(function() {
        $(".catLink").click(function() {
            $(".subCategoryRow").show(); // This selector is wrong
        });
    });
 </script>

我的代码选择了所有 subCategoryRow。我只想选择所选类别下的那些。有人可以帮我构建正确的选择器吗？

Answer 1

尝试

$(function() {
    $(".catlink").click(function() {
       $(this).closest('tr').nextUntil("tr:has(.catlink)").find('.subCategoryRow').show();
    });
});

演示:Fiddle

注意:类名区分大小写 - 您使用了 catlink 和 catLink