Question

我需要隐藏<tr>个没有课程的元素，这些元素位于具有类＆＃39; class1＆＃39;

的<tr>之间

   <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> - 以及带有类＆＃39; class1＆＃39;的下一行。

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>

Answer 2

使用此代码

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

首先为.class 1 tr
比选择所有tr直到（之前）.class 1
隐藏所有

Answer 3

如果你想隐藏在tr clicked class try

之间

$(".class1").click( function() {
    $(this).nextUntil(".class1").hide();  //hide next class with name class class1
    $(this).prevUntil(".class1").hide();  //hide previous class with name class class1
} );

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

3 个答案: