CODEWITHSUNDEEP
javascriptjquery
arunsignit
arunsignit

Reputation: 209

How can i hide next set of elements using jquery

I need to hide the <tr> elements which are not having class in between the <tr> which has class '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

When I click the <tr class="class1">, the code should hide only <tr> which are between the clicked row - and the next one with class 'class1'.

Upvotes: 2

Views: 152

Answers (3)

srinath madusanka
srinath madusanka

Reputation: 592

if you want to hide between 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
} );

Upvotes: 1

Dead.Rabit
Dead.Rabit

Reputation: 1975

you want the JQUery nextUntil() function, something like the following:

$(".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>

Upvotes: 8

A.B
A.B

Reputation: 20445

use this code

 $("tr.class1").click(function(){
   $(this).nextUntil(".class1").hide();
   });
  • First make a click handler for .class1 tr
  • than select all tr until(before) .class1
  • hide them all

Upvotes: 1

Related Questions