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类上附加一个点击处理程序。我希望能够选择subCategoryRows下的topCategoryRows：

<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

Answer 2

试试这个。

$(function() {
    $(".catLink").click(function() {
        var xCurrentObj = $(this).closest('tr');
        $('.subCategoryRow').filter(function(){
            return ($(this).parent().index() > xCurrentObj.index());
        }).show();
    });
});

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

2 个答案:

DEMO