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屋！