My goal is to apply a "bg-info" class using jQuery to all rows (tr) that come after odd rows with a child element of "test". The "bg-info" class should be removed when a row with a child element of "test" is encountered, and then re-applied when the next odd row with a child element of "test" is seen. Since the number of rows can vary, the solution cannot rely on a fixed count of rows. Despite many attempts, I have been unable to get this functionality working correctly. Any help would be greatly appreciated. See JSFiddle for details :)
JSFiddle
https://jsfiddle.net/vrpuahue/4/
HTML
<table>
<thead>
<tr>
<th>Test</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="test">Test1</div>
</td>
</tr>
...
</tbody>
</table>
CSS
.bg-info {
background: grey;
}
JS
$('tbody tr td .test:odd').parent().parent().addClass('bg-info');