Question

I am trying to grab all the td elements between the first two that have the class ‘selected’. and change the text color to green. I am using nextUntil but the problem I am facing is that when there is a new <tr> it doesn’t grab those td elements. Is there a way to ignore any <tr> tags using nextUntil? Thanks

jQuery:

var firstDate = $('table.jCalendar tbody').find($('td.selected')[0]);
var secondDate = $('table.jCalendar tbody').find($('td.selected')[1]);
$(firstDate).nextUntil(secondDate).css("color", "green");

HTML:

<table cellspacing="2" class="jCalendar"><tbody>
<tr>
   <td class="current-month weekday today unselectable">18</td>
   <td class="current-month weekday unselectable">19</td>
   <td class="current-month weekday selected">20</td>
   <td class="current-month weekday unselectable" style="color: green; ">21</td>
   <td class="current-month weekday unselectable" style="color: green; ">22</td>
   <td class="current-month weekend unselectable" style="color: green; ">23</td>
   <td class="current-month weekend unselectable" style="color: green; ">24</td>
</tr>
<tr>
   <td class="current-month weekday today unselectable">25</td>
   <td class="current-month weekday unselectable">26</td>
   <td class="current-month weekday selected">27</td>
   <td class="current-month weekday unselectable">28</td>
   <td class="current-month weekday unselectable">29</td>
   <td class="current-month weekend unselectable">30</td>
   <td class="current-month weekend unselectable">31</td>
</tr>
</tbody></table>

so to clarify i want the td elements with the texts 20 through 26 selected but 21 through 24 is only being selected. Sometimes there are more then just one set of <tr> tags between the td tags with the class selected.

Answer 1

My understanding is to highlight every TD regardless of row between the 2 selected class.

Am using a class change instead of inline CSS as it is much easier to remove on subsequent selections with one line of code.

DEMO: http://jsfiddle.net/5txeq/

var firstRow = $('td.selected:first').parent()
var secondRow = $('td.selected:last').parent();

$('tr').slice(firstRow.index() + 1, secondRow.index()).find('td').addClass('green')

firstRow.find('.selected').nextAll().andSelf().addClass('green')
secondRow.find('.selected').prevAll().andSelf().addClass('green')

Alternate shorter version:
DEMO: http://jsfiddle.net/5txeq/2/

var $cells = $('tbody td'),
    idx_1 = $cells.index($('td.selected:first')),
    idx_2 = $cells.index($('td.selected:last'));

$cells.slice(idx_1, idx_2 + 1).addClass('green');