James Leist James Leist - 3 months ago 17
jQuery Question

jQuery - Need to select next 7 elements with class

What I am trying to do is I am using the date picker and have the bookable days with a class of .bookable and the non bookable ones a class of .non_bookable as follows:

<tr>
<td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">7</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">8</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">9</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">10</span></td>
<td class=" ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">11</span></td>
<td class=" ui-datepicker-week-end ui-datepicker-unselectable ui-state-disabled not_bookable" title="This date is unavailable"><span class="ui-state-default">12</span></td>
<td class="ui-datepicker-week-end ui-datepicker-days-cell-over bookable" title="This date is available" data-handler="selectDay" data-event="click" data-month="10" data-year="2016"><a class="ui-state-default ui-state-active" href="#">13</a></td>
</tr>


What I am trying to do is select the next 7 elements with the .non_bookable class after the one with the .bookable class.

I am trying just to select the next one (before I even try the next 7!) but can't seem to be able to do this, I believe because it's up a level and in the next tag. The code I am using is:

<script type="text/javascript">

jQuery( document ).ready(function() {

jQuery('tr .bookable').closest('tr .not_bookable').css('background','green');
});




I have all the code in full at jsfiddle.net/jmkqza5f/2

Thanks in advance for your help.

UPDATE - As you will see on the Fiddle, it is applying the style to the previous elements rather than the next elements.

Answer

This will work. The way your current code is set up, it is looking for the closest table row, which in this case is the parent element.

jQuery( document ).ready(function() {

    jQuery('tr .bookable').parents('tr').next('tr').find('.not_bookable').css('background','green');
});