JQuery中nextUntil切换中的条件 [英] Condition in nextUntil toggle in JQuery
问题描述
我正在使用nextUntil
方法来切换表格行值.除非在任何级别的最后一个链接中,否则它都工作正常.例如(请参阅表),当我单击级别1.2.2(第3类)时,它隐藏了所有最下面的行,因为它在下面的右边是第3级.我相信我需要增加一个条件来实现这一目标.但是不知道如何添加条件.
I am using nextUntil
method to toggle my table rows values. It is working fine unless in the last link of any levels. For example (please see the table), when I am clicking the Level 1.2.2 (class 3), it is hiding all the bottom rows because it is looking level 3 below which is right. I believe I need a condition to add to achieve this. But don't know how to add condition.
我希望当任何低于或低于单击的班级的班级时,它将停止切换.另外,还有其他方法可以实现这些目标,因为这是一个缓慢的过程.
I want when any class level below (less than) from clicked class level, it will stop toggling. Also, is there any other way I can achieve these because it is a slow process.
这是代码:
<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();
});
});
提前谢谢!
推荐答案
由于您无法更改HTML结构,因此有另一种选择:
As you can't change your HTML structure, here's an alternative:
$('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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>
类似于Thor84no的回答,但更简单,IMO.
Similar to Thor84no's answer, but simpler, IMO.
这篇关于JQuery中nextUntil切换中的条件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!