Question

我有一个像这样的结构表：

<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>

正如您所看到的，子类与其父ID相对应。现在我想在每次单击父行时切换所有类名等于其父行id的行。

我试过这个，也许是愚蠢的尝试:)并且似乎无法让这个工作：

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

感谢。

Answer 1

几乎就在那里，你好哟：

$('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();
});

Answer 2

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>

切换表行兄弟

2 个答案: