3

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

如果一家公司有女儿，我会<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();
        }
    );
});

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

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

4

3 回答 3

1

company_daughter我相信这会起作用，点击后它将隐藏所有内容.image：

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

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

于 2013-06-19T14:26:46.330 回答
1

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

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

参考：

于 2013-06-19T14:27:09.837 回答
1

下面的代码应该是你想要的；

$('.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();
        }
    );
});
于 2013-06-19T14:27:20.267 回答