jQuery выбирает все элементы, которые следуют или предшествуют элементу с данным классом

Question

У меня есть программа выбора jQuery css для подкованных.

У меня есть таблица с последовательностью строк, такой как показано ниже:

<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>

Мне нужночтобы добавить класс, например, 'checkin', на все td.selected, которые следуют сразу за td.disabled, но также мне нужно добавить класс 'checkout' на все td.selected, которые предшествовали td.disabled.Результат должен выглядеть так:

<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>

Любые идеи,

Спасибо

Answer 1

Вы можете использовать next () и prev () соответственно, фильтруя братьев и сестер через выбранный вами селектор:

$("td.disabled").next(".selected").addClass("checkin").end()
                .prev(".selected").addClass("checkout");

Answer 2

AFAIK это нельзя сделать с помощью селектора CSS для класса "checkin", потому что вы не можете ссылаться на предшествующий элемент в селекторе (хотя это может быть сделано для другой половины).

Однако вы можете сделать это с разумным использованием .filter:

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

См. Это в действии .

Answer 3

$("tr td.selected:first-child").addClass("checkin");
$("tr td.selected:last-child").addClass("chechout");