Question

我有一个相当大的公司表，这些公司可以有一个女儿，这些都列在他们下面。我希望能够为每个公司的每个“女儿”部分进行切换。

如果公司有女儿，我为每个显示图像的<span class="image">添加了<td>。如果单击图像，将切换女儿的行。

布局如下：

 <tr>
     <td><span class="image"></span>
     <td>Company</td>
 </tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr><td>Company</td></tr>
 <tr><td>Company</td></tr>
 <tr><td>Company</td></tr>
 <tr>
     <td><span class="image"></span>
     <td>Company</td>
 </tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>
 <tr class="company_daughter"><td>!data</td></tr>

 etc

到目前为止，我提出了这个问题：

$('.image').click(function(){ 
    var closest = $(this).closest('tr')
    $('tr.company_daughter').each(function(){
            closest.hide();
        }
    );
});

每家公司都应该只展示自己的女儿

但是我似乎无法正确解决“部分”问题。

Answer 1

我相信这会有效，在company_daughter被点击后会隐藏所有.image：

$(".image").click(function() {
    $(this).closest("tr").nextUntil("tr:not(.company_daughter)").toggle();
});

演示：http://jsfiddle.net/Rj5Ac/2/

Answer 2

我建议，虽然目前未经测试：

$('.image').click(function(){
    $(this).closest('tr').nextUntil('tr:has(".image")').toggle();
});

参考文献：

Answer 3

以下代码应该是您想要的;

$('.image').click(function(){ 
    // get the clicked company row
    var closest = $(this).closest('tr');
    //give main company class "company"
    closest.nextUntil("tr.company").each(function(){
            //Every this means tr.company_daughter
            $(this).toggle();
        }
    );
});

按类隐藏多个表行

3 个答案: