next中的条件在JQuery中切换
我正在使用nextUntil方法来切换我的表行值。 除非在任何级别的最后一个链接中，否则它正常工作。 例如（请参阅表格），当我点击Level 1.2.2（第3类）时，它隐藏了所有底行，因为它正在看下面的3级是正确的。 我相信我需要一个条件来实现这个目标。 但不知道如何添加条件。
我希望当任何级别低于（小于）点击类级别时，它将停止切换。 此外，还有其他方法可以实现这些，因为这是一个缓慢的过程。
这是代码：
Level 1 Level 1.1 Level 1.1.1 Level 1.1.2 Level 1.2 Level 1.2.1 Level 1.2.2 Level 1.2.2.1 Level 1.2.2.1 Level 2 Level 2.1 Level 2.1.1 Level 2.1.2
$(document).ready(function () { $('tr.3').click(function () { $(this).nextUntil('tr.3').slideToggle(); }); });
提前致谢！
由于您无法更改HTML结构，因此可以选择以下方法：
$('tr').click(function(event) { event.stopPropagation(); var currentLevel = parseInt($(this).attr('class')), state = $(this).hasClass('hiding'), nextEl = $(this).next(), nextLevel = parseInt(nextEl.attr('class')); while (currentLevel < nextLevel) { nextEl.toggle(state); nextEl = nextEl.next(); nextLevel = parseInt(nextEl.attr('class')); } $(this).toggleClass('hiding'); });
tr[class^="2"] td { padding-left: 20px; } tr[class^="3"] td { padding-left: 40px; } tr[class^="4"] td { padding-left: 60px; }
Level 1 Level 1.1 Level 1.1.1 Level 1.1.2 Level 1.2 Level 1.2.1 Level 1.2.2 Level 1.2.2.1 Level 1.2.2.1 Level 2 Level 2.1 Level 2.1.1 Level 2.1.2
听起来这应该是一个嵌套的HTML结构，它更容易：
$('li').click(function(event) { event.stopPropagation(); $(this).children().find('li').slideToggle(); });
- Level 1
- Level 1.1
- Level 1.1.1
- Level 1.1.2
- Level 1.2
- Level 1.2.1
- Level 1.2.2
我已经玩了一些游戏，我绝不认为这是最佳的，但我认为我已经能够调整你所拥有的东西，至少可以起作用。 希望这是可以理解的，但我改变的主要原则是，不是直接在nextUntil返回的nextUntil使用nextUntil ，而是使用each来为该集合中的每个元素调用一个函数。
如果有任何需要澄清或改进，请告诉我。
$(document).ready(function () { $('tr').click(function () { var toggledLevel = parseInt($(this).attr('class')); var hiding = !$(this).hasClass('hidden'); $(this).toggleClass('hidden'); $(this).nextUntil('tr.' + toggledLevel).each(function() { var $this = $(this) var currentLevel = parseInt($this.attr('class')); if (currentLevel > toggledLevel) { $this.toggle(!hiding); $this.removeClass('hidden'); } }); }); });
tr[class^="2"] td { padding-left: 20px; } tr[class^="3"] td { padding-left: 40px; } tr[class^="4"] td { padding-left: 60px; }
Class 1 - Level 1 Class 2 - Level 1.1 Class 3 - Level 1.1.1 Class 3 - Level 1.1.2 Class 2 - Level 1.2 Class 3 - Level 1.2.1 Class 3 - Level 1.2.2 Class 4 - Level 1.2.2.1 Class 4 - Level 1.2.2.1 Class 1 - Level 2 Class 2 - Level 2.1 Class 3 - Level 2.1.1 Class 3 - Level 2.1.2