隐藏所有后代表行

Question

我正在与jQuery合作，尝试切换父级tr的子级tr。
这一次只工作一个tr级别； 但是，当一个内部tr的子项折叠而外部一个TR相同时，内部tr的子项仍然可见。
我希望在单击“级别1”类时隐藏所有后代（“级别2”和“级别3”类），并且希望在单击“级别2”时隐藏“级别3”类。

这是我一直在使用的代码。

$(".mainTable td[class^='Level1']").each(function() {
    //copy td class to tr
    $(this).parent().addClass($(this).attr('class'));
    //add function to tr
    $(this).parent().click(function() {
        //toggle all elements to next Level1 class
        $(this).nextUntil("[class^='Level1']").toggle();
    });
});


$(".mainTable td[class^='Level2']").each(function() {
    //copy td class to tr
    $(this).parent().addClass($(this).attr('class'));
    //add function to tr
    $(this).parent().click(function() {
        //toggle all elements to next Level1 class
        $(this).nextUntil("[class^='Level1']").toggle();
    });
});

这是HTML：

<table class="mainTable">
    <tbody>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level2">Level 2</td></tr>
        <tr><td class="Level3">Level 3</td></tr>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level1">Level 1</td></tr>
        <tr><td class="Level2">Level 2</td></tr>
    </tbody>
</table>

谢谢你的帮助。

Answer 1

您可以使此代码更干燥。 这应该适用于任何级别的深度。 演示

function getLevel(el) { //extract level as integer from classname
    var level = /Level(\d+)/.exec(el.className)
    return level != null ? parseInt(level[1], 10) : NaN;    
}

$('.mainTable').on('click', 'td', function() { //use event delegation
    var level = getLevel(this), //get current level
        parent, state;
    if(level == level) { //checking for NaN              
        parent = $(this).parent('tr'); //get parent
        state = !!parent.data('state'); //get current state

        parent.nextUntil(function(_, item) { //filter lower levels
                    return getLevel(item.cells[0]) <= level;
               })
              .each(function(_, item) {
                    $(item).data('state', !state)
                           .toggle(state);
               }); //show|hide

        parent.data('state', !state); //save current state.
    }
});

如果可以修改html，则可以使用数据属性极大地降低代码复杂度。

<tr data-level="1">...</tr>
<tr data-level="3">...</tr>

像这样指定级别，您将消除提取数字形式的级别所需的所有字符串操作。

Answer 2

这应该做的工作：

$(".mainTable td[class^=Level]").each(function() {
    $(this).parent().addClass($(this).attr('class'));
});

$(".mainTable tr[class^=Level1]").click(function() {
    var items = $(this).nextUntil("[class^=Level1]");

    if (items.filter(':hidden').length > 0) {
        items.show();
    }
    else {
        items.hide();
    }
});

$(".mainTable tr[class^=Level2]").click(function() {
    $(this).nextUntil("[class^=Level1], [class^=Level2]").toggle();
});

演示在这里： jsFiddle