user3651476 user3651476 - 3 years ago 99
jQuery Question

jQuery get all table rows until class

I am having a table rows from db via ajax and I have this sample:

<tr class="header packagesTR expand">
<td>
Boxing Amateur
</td>
<td>
0
</td>
<td width="20%"><button type="button" class="btn btn-warning pull-left showInclude"><i class="fa fa-minus"></i></button>
</td>
</tr>
<tr>
<td>
Sparring Fee
</td>
<td>
0
</td>

</tr>
<tr>
<td>
Water
</td>
<td>
0
</td>
</tr>
<tr class="header packagesTR expand">
<td>
<input type="hidden" name="category" value="packages">
<input type="hidden" name="PK" value="2">
Muay Thai Amateur
</td>
<td>
0
</td>
</tr>


When I clicked on the ".showInclude" button, I want to get the current table row and the next table rows until the next class name "header".

I am able to get the current table, by:

$(this).closest('tr.header').html();


How can I iterate through each table row until the next class?

Answer Source

i clicked on the ".showInclude" button, i want to get the current table row and the next table rows until the next class name "header".

You can use .nextUntil() along with .add() to add current row header in collection:

var closesrthr= $(this).closest('tr.header');
closesrthr.nextUntil('.header').add(closesrthr).nextUntil('.header').html();

How i can iterate through each table row until the next class?

You have the object of rows current row .header and rows until next first sibling .header. you can iterate over them using each:

var closesrthr= $(this).closest('tr.header');
closesrthr.nextUntil('.header').add(closesrthr).each(function(){
    //do stuff
});

Working Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download