條件nextUtill在JQuery中切換

Question

我正在使用nextUntil方法來切換我的錶行值。它工作正常，除非在任何級別的最後一個環節。例如（請看錶格），當我點擊Level 1.2.2（class 3）時，它隱藏了所有底部行，因爲它看起來是第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(); 
    }); 
}); 

提前感謝！

Answer 1

正如你不能改變你的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; 
 
}

<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。

Answer 2

我已經有了一點戲劇，我絕不認爲這是最佳的，但我確實認爲我已經能夠調整你至少有什麼東西，至少可以工作。希望這是可以理解的，但我的改變背後的主要原則是，不是直接在由nextUntil返回的集合上使用slideToggle，而是使用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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

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

Answer 3

這聽起來好像這應該是一個嵌套的HTML結構，它更容易：

$('li').click(function(event) { 
 
    event.stopPropagation(); 
 
    $(this).children().find('li').slideToggle(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id=test> 
 
    <li> 
 
    Level 1 
 
    <ul> 
 
     <li> 
 
     Level 1.1 
 
     <ul> 
 
      <li> 
 
      Level 1.1.1 
 
      </li> 
 
      <li> 
 
      Level 1.1.2 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li> 
 
     Level 1.2 
 
     <ul> 
 
      <li> 
 
      Level 1.2.1 
 
      </li> 
 
      <li> 
 
      Level 1.2.2 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </li> 
 
</ul>