Question

I have a jQuery css selector treat for tha savvy ones.

I’m having a table with a sequence of rows such as the one shown below:

<tr>
    <td class="disabled"><a href="#"><span>1</span></a></td>
    <td class="disabled"><a href="#"><span>2</span></a></td>
    <td class="disabled"><a href="#"><span>3</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
    <td class="selected"><a href="#"><span>5</span></a></td>
    <td class="selected"><a href="#"><span>5</span></a></td>
    <td class="selected"><a href="#"><span>6</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
    <td class="selected"><a href="#"><span>5</span></a></td>
    <td class="selected"><a href="#"><span>5</span></a></td>
    <td class="selected"><a href="#"><span>6</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
</tr>

I need to add a class e.g. ‘checkin’, on all td.selected that immediately follow td.disabled, but also I need to add class ‘checkout’ on all td.selected that preceed td.disabled. Result should come up like this:

<tr>
    <td class="disabled"><a href="#"><span>1</span></a></td>
    <td class="disabled"><a href="#"><span>2</span></a></td>
    <td class="disabled"><a href="#"><span>3</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
    <td class="selected checkin"><a href="#"><span>5</span></a></td>
    <td class="selected"><a href="#"><span>5</span></a></td>
    <td class="selected checkout"><a href="#"><span>6</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
    <td class="selected checkin"><a href="#"><span>5</span></a></td>
    <td class="selected"><a href="#"><span>5</span></a></td>
    <td class="selected checkout"><a href="#"><span>6</span></a></td>
    <td class="disabled"><a href="#"><span>4</span></a></td>
</tr>

Any ideas,

Thanks

Answer 1

AFAIK this cannot be done with a CSS selector for the “checkin” class, because you cannot reference the preceding elemen in the selector (it can be done for the other half though).

However, you can do this with judicious use of .filter:

$(".selected").filter(function() { return $(this).prev(".disabled").length; })
              .addClass("checkin").end()
              .filter(function() { return $(this).next(".disabled").length; })
              .addClass("checkout");

See it in action.