jquery - jQuery 用类切换 NextUntil td 的父 tr

Question

我有一个表，它是由 td 上的切换类和后续行 td 上的切换更多类生成的。

我试图定位父 TR 并使用 next until 然后在 td togglelink 类之后切换以下 TR 的可见性，并指定 td toggle-more 的 nextuntil 父 tr。

这是我的桌子

<table  width=100% >
      <tr>
        <th>Description</th>
        <th>Actions</th>
      </tr>

      <tr>
        <td class="toggle">Agriculture</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td class="toggle-more" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle-more" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle-more" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle">Blah Blah</td>
        <td >&nbsp;</td>
      </tr>
      <tr  class="toggle-more" >
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td class="toggle">Blah Blah</td>
        <td >&nbsp;</td>
      </tr>
      <tr  class="toggle-more" >
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td><input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td ><input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr  class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td><input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr>
        <td>Health</td>
        <td><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
      <tr >
        <td >Dental</td>
        <td ><input type="checkbox" name="LookUpItem_16" value="1910|Dental">
          &nbsp;Click&nbsp;to&nbsp;Select</td>
      </tr>
    </table>

这是我的 jQuery。

    $(document).ready(function(){
var showText='+ Show Options';
var hideText='- Hide Options';
var is_visible = false;  

$('.toggle').wrapInner('<a href="#" class="toggleLink" />');
$('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
$('.toggle').css({ 
        //width: '100%'
}); 
$('.toggle-more').closest( 'tr' ).hide();
$('a.toggleLink').click(function() {
    is_visible = !is_visible;
    $('.showtext').html( ($('.showtext').html() == hideText) ? showText : hideText);
    $(this).parents('tr').nextUntil('td:not(.toggle-more)').animate({ opacity: "toggle" });
    return false; 
});
});

它几乎可以工作。我做错了什么，有更好的方法吗？

过去 2 行没有切换或有切换。

Answer 1

每当需要多个表行来表示一个逻辑项时，我建议将这些行分组到<tbody>标签中（是的，它是完全有效的 HTML）。

这样做，您可以放弃.nextUntil()该.siblings()方法，并且在我看来，它可以更容易地在 jQuery 中使用。

JsFiddle：在此处查看演示

HTML：

<table width="100%">
    <thead>
        <tr>
            <th>Description</th>
            <th>Actions</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="toggle">Agriculture</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
            <td>
                <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td class="toggle">Blah Blah</td>
            <td>&nbsp;</td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
            <td>
                <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
        <tr>
            <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
            <td>
                <input type="checkbox" name="LookUpItem_3" value="130|Horitculture" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Health</td>
            <td>
                <input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td>Dental</td>
            <td>
                <input type="checkbox" name="LookUpItem_16" value="1910|Dental" />
                &nbsp;Click&nbsp;to&nbsp;Select
            </td>
        </tr>
    </tbody>
</table>

jQuery：

$(function(){
    var showText='+ Show Options';
    var hideText='- Hide Options';

    $('.toggle').wrapInner('<a href="#" class="toggleLink" />');
    $('.toggleLink').append( ' <span class="showtext">'+showText+'</span>' );
    $('table tbody').each(function(){
        $(this).find('tr').not(':first').hide(); 
    });

    $('a.toggleLink').click(function() {
        var $a = $(this);
        $a.find('.showtext').html( ($a.find('.showtext').html() == hideText) ? showText : hideText);
        $a.closest('tr').siblings('tr').animate({ opacity: "toggle" });

        return false; 
    });
});

希望能帮助到你。

Answer 2

我相信这就是你要找的东西：http: //jsbin.com/equqaw/1/

正如您在此处看到的，我对标记和 jQuery 进行了一些更改。所有的toggle和toggle-more类现在都在trs 上，而且点击功能现在也略有不同。

标记：

<table>
    <tr>
        <th>Description</th>
        <th>Actions</th>
    </tr>

    <tr class="toggle">
        <td>Agriculture</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td>
            <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle">
        <td>Blah Blah</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td>
            <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle">
        <td>Blah Blah</td>
        <td>&nbsp;</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Aquaculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_1" value="110|Aquaculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Dairy Production</td>
        <td>
            <input type="checkbox" name="LookUpItem_2" value="120|Dairy Production">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr class="toggle-more">
        <td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Horitculture</td>
        <td>
            <input type="checkbox" name="LookUpItem_3" value="130|Horitculture">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr>
        <td>Health</td>
        <td>
            <input type="checkbox" name="LookUpItem_16" value="1910|Dental">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
    <tr>
        <td>Dental</td>
        <td>
            <input type="checkbox" name="LookUpItem_16" value="1910|Dental">
            &nbsp;Click&nbsp;to&nbsp;Select</td>
    </tr>
</table>  

jQuery：

$(document).ready(function () {
    var showText = '+ Show Options';
    var hideText = '- Hide Options';

    $('.toggle td:nth-child(2)').wrapInner('<a href="#" class="toggleLink" />');
    $('.toggleLink').append(' <span class="showtext">' + showText + '</span>');
    $('.toggle').css({
        //width: '100%'
    });
    $('.toggle-more').closest('tr').hide();
    $('a.toggleLink').click(function () {
        var showTextSpan = $(this).find('.showtext');
        showTextSpan.html((showTextSpan.html() == hideText) ? showText : hideText);
        $(this).closest('tr').nextUntil('tr:not(.toggle-more)').animate({
            opacity : "toggle"
        });
        return false;
    });
});

希望有帮助。随时提出您的任何问题作为评论...