切换表行的兄弟姐妹

我有结构像这样的表：切换表行的兄弟姐妹

<table> 
<tr id="id1" class="parent"></tr> 
<tr class="id1"></tr> 
<tr class="id1"></tr> 
<tr class="id1"></tr> 
<tr class="id1"></tr> 

<tr id="id2" class="parent"></tr> 
<tr class="id2"></tr> 
<tr class="id2"></tr> 
<tr class="id2"></tr> 
<tr class="id2"></tr> 

.....etc 
</table>

正如你可以看到子类coresponding他们的父ID。现在，我想要切换父类行被点击时所有具有与父行ID相同的行的行。

我曾经尝试这样做，也许是愚蠢的尝试:)似乎并不能得到这个工作：

$('tr.parent').click(function() { 
    //alert('yay'); 
    var tog = $(this).attr('id'); 
    $(this).siblings().hasClass(tog).slideToggle(); 
    return false; 
    });

感谢。

来源

2010-03-11 swan

快到了，这里亚哟：

$('tr.parent').click(function() { 
    var tog = $(this).attr('id'); 
    $(this).siblings('.' + tog).slideToggle(); 
    return false; 
});

.hasClass()返回一个布尔值，它会检查，如果一个元素有一个类，你要通过类来过滤。 .siblings()接受选择器过滤器，see here for details。

如果子行总喜欢你的例子后的，你可以使这个多一点效率的前锋只有.nextAll()这样查找：

$('tr.parent').click(function() { 
    $(this).nextAll('.' + $(this).attr('id')).slideToggle(); 
});

来源

2010-03-11 21:17:20

啊，是的，当然。奇迹般有效。尼克，非常感谢你。 – swan 2010-03-11 21:21:22

@kuswantin - 欢迎:) – 2010-03-11 21:23:01

jQuery代码：

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('table').children('tbody').toggle(false); 
     $(".lnkToggle").bind('click', function() { 
      $(this).closest('table').children('tbody').toggle(); 
     }); 

    }); 
</script>

HTML表格：

<table class="table table-striped"> 
    <thead> 
     <tr> 
      <th style="text-align: left; width: 250px;"> 
       <i class="lnkToggle" title="Click to view cases"> + </i> 
       MOVIES 
      </th> 
     </tr> 
    </thead> 

    <tbody> 
     <tr> 
      <td>MATRIX</td> 
     </tr> 
     <tr> 
      <td>TOY STORY</td> 
     </tr> 
     <tr> 
      <td>THE GOONIES</td> 
     </tr> 
    </tbody> 
</table>

来源

2012-08-08 02:10:29

切换表行的兄弟姐妹

回答

相关问题