javascript - 我如何使用 jquery 隐藏下一组元素

Question

我需要隐藏<tr> <tr> 之间没有类的元素其中有类“class1”

   <tr class="class1"><td><input type="button" value="Click" /></td></tr>
   <tr><td>1</td></tr>
   <tr><td>2</td></tr>
   <tr><td>3</td></tr>
   <tr><td>4</td></tr>
   <tr><td>5</td></tr>
   <tr><td>6</td></tr>
   <tr class="class1"><td><input type="button" value="Click" /></td></tr>
   <tr><td>7</td></tr>
   <tr><td>8</td></tr>
   <tr><td>9</td></tr>
   <tr><td>10</td></tr>
   <tr><td>11</td></tr>
   <tr><td>12</td></tr>
   <tr class="class1"><td><input type="button" value="Click" /></td></tr>
   <tr><td>7</td></tr>
   ...etc

当我点击<tr class="class1">时，代码应该只隐藏 <tr>它们位于单击的行和下一个类“class1”之间。

Answer 1

你想要JQUery nextUntil() function ，如下所示:

$(".class1").click( function() {
    $(this).nextUntil(".class1").hide();
} );

$(".class1").click( function() {
    $(this).nextUntil(".class1").toggle();
} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table> <tr class="class1"><td><input type="button" value="Click" /></td></tr>
   <tr><td>1</td></tr>
   <tr><td>2</td></tr>
   <tr><td>3</td></tr>
   <tr><td>4</td></tr>
   <tr><td>5</td></tr>
   <tr><td>6</td></tr>
   <tr class="class1"><td><input type="button" value="Click" /></td></tr>
   <tr><td>7</td></tr>
   <tr><td>8</td></tr>
   <tr><td>9</td></tr>
   <tr><td>10</td></tr>
   <tr><td>11</td></tr>
   <tr><td>12</td></tr>
    </table>