Javascript JQuery中nextUntil切换中的条件

我正在使用

nextUntil

方法切换我的表行值。除非在任何级别的最后一个链接中，否则它工作正常。例如（请参见表格），当我单击Level 1.2.2（class 3）时，它隐藏了所有的底部行，因为它正在查看下面的Level 3，该级别是正确的。我相信我需要一个条件来实现这一点。但不知道如何添加条件

我想当任何低于（小于）类级别的类级别被单击时，它将停止切换。还有，我有没有其他方法可以实现这些，因为这是一个缓慢的过程

代码如下：

<table id=test>
  <tr class=1><td>Level 1</td></tr>
  <tr class=2><td>Level 1.1</td></tr>
  <tr class=3><td>Level 1.1.1</td></tr>
  <tr class=3><td>Level 1.1.2</td></tr>
  <tr class=2><td>Level 1.2</td></tr>
  <tr class=3><td>Level 1.2.1</td></tr>
  <tr class=3><td>Level 1.2.2</td></tr>
  <tr class=4><td>Level 1.2.2.1</td></tr>
  <tr class=4><td>Level 1.2.2.1</td></tr>
  <tr class=1><td>Level 2</td></tr>
  <tr class=2><td>Level 2.1</td></tr>
  <tr class=3><td>Level 2.1.1</td></tr>
  <tr class=3><td>Level 2.1.2</td></tr>
</table>

$(document).ready(function () {
    $('tr.3').click(function () {
        $(this).nextUntil('tr.3').slideToggle();
    });
});

一级
1.1级
级别1.1.1
级别1.1.2
1.2级
级别1.2.1
级别1.2.2
级别1.2.2.1
级别1.2.2.1
二级
2.1级
2.1.1级
级别2.1.2
$（文档）.ready（函数（）{
$（'tr.3'）。单击（函数（）{
$（this.nextUntil（'tr.3'）.slideToggle（）；
});
});

---

提前谢谢

我对它进行了一些尝试，我绝对不认为这是最优的，但我确实认为我已经能够将你所拥有的调整到至少有效的程度。希望这是可以理解的，但我的更改背后的主要原则是，我使用

each

为该集合中的每个元素调用函数，而不是直接在

nextUntil

返回的集合上使用

slideToggle

如果需要澄清或改进，请告知我

$（文档）.ready（函数（）{
$（'tr'）。单击（函数（）{
var-toggledLevel=parseInt（$（this.attr（'class'））；
var hiding=！$（this.hasClass（'hidden'）；
$（this.toggleClass（'hidden'）；
$（this）.nextUntil（'tr.+toggledLevel）.each（function（）{
变量$this=$（this）
var currentLevel=parseInt（$this.attr（'class'））；
如果（当前级别>切换级别）{
$this.toggle（！隐藏）；
$this.removeClass（'hidden'）；
}
});
});
});
tr[class^=“2”]td{
左侧填充：20px；
}
tr[class^=“3”]td{
左侧填充：40px；
}
tr[class^=“4”]td{
左侧填充：60px；
}

一级-一级
第2类-1.1级
3级-1.1.1级
3级-1.1.2级
第2类-1.2级
3级-1.2.1级
3级-1.2.2级
4级-1.2.2.1级
4级-1.2.2.1级
一级-二级
2级-2.1级
3级-2.1.1级
3级-2.1.2级
听起来这应该是一个嵌套的HTML结构，它更容易：


$（'li'）。单击（函数（事件）{
event.stopPropagation（）；
$（this.children（）.find（'li'）.slideToggle（）；
});



一级


1.1级


级别1.1.1


级别1.1.2




1.2级


级别1.2.1


级别1.2.2





由于您无法更改HTML结构，这里有一个替代方案：


$（'tr'）。单击（函数（事件）{
event.stopPropagation（）；
var currentLevel=parseInt（$（this.attr（'class'）），
state=$（this.hasClass（'hiding'），
nextEl=$（this）.next（），
nextLevel=parseInt（nextEl.attr（'class'））；
while（当前级别
tr[class^=“2”]td{
左侧填充：20px；
}
tr[class^=“3”]td{
左侧填充：40px；
}
tr[class^=“4”]td{
左侧填充：60px；
}

一级
1.1级
级别1.1.1
级别1.1.2
1.2级
级别1.2.1
级别1.2.2
级别1.2.2.1
级别1.2.2.1
二级
2.1级
2.1.1级
级别2.1.2
我不确定我是否遵循了这一点，也不确定您为什么要使用
nextUntil
。单击1.2.2时，隐藏的是1.2.2.1（*2）和2与2.1，这看起来很奇怪。我是否正确地理解了，你真正想要的是，当点击N级时，N.x应该被切换，当点击A.N时，你想要A.N.x被切换，而不是B.x？（那么最后你想在切换到更高级别时带回任何隐藏的东西吗？）如果是这样，我想你需要使用不同的工具来完成这项工作。@Thor84不，我正需要你说的。你能给我一个工作的例子吗，我刚刚开始JQuery，并且认为它会很好。非常感谢，它的工作，但是当我点击我的关卡时需要一点时间来隐藏，尽管我现在有大约40条记录和3个关卡。有什么方法可以提高性能吗？我也发现，有时候我在顶层单击时，第一次单击不起作用，但第二次单击起作用。请你也检查一下性能好吗。多谢，有什么建议我怎样才能提高this@arifpervez我稍后会试着看一看。我确实看到了一些小的延迟，但我没有看到它在第一次点击时不起作用。这可能只是一个额外的长时间延迟吗？一个快速的改进是通过将调用存储在变量中来摆脱
$（this）
调用，但如果这是一个很大的收益，我会感到惊讶。我现在就编辑。@arifpervez没问题。我已经做了一些调整。可能会让它尽可能好。嗨，杰米，对不起，我不能改变HTML结构，现在很难改变。它当然更整洁了。一个小问题是，如果您切换一个元素，然后通过切换其父元素来隐藏它，那么下一次单击该元素将没有效果（除了修复
隐藏
类）。第二次单击会将其隐藏为正常值。@Thor84no您的观点是正确的。
隐藏类可能应从
while
循环中找到的所有元素中删除：）