nextUntilの条件JQueryで切り替える

Question

nextUntilメソッドを使用してテーブル行の値を切り替えます。どのレベルの最後のリンクでもない限り正常に動作しています。たとえば、レベル1.2.2（クラス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を変更することはできませんとして構造体の場合、代替は次のとおりです。

0 IMO Thor84noの答えと同様に

$('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>

が、シンプルな、。

Answer 2

私はこれと少し遊んでいましたが、これは最適だとは決して考えませんでしたが、少なくとも私があなたが持っていたものを微調整できたと思います。うまくいけば分かりやすいかもしれませんが、私の変更の背後にある主な原則はslideToggleを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; 
 
}

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