jQuery选择在给定类的元素后面或前面的所有元素

我有一个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>

我需要在紧接td.disabled之后的所有td.selected上添加一个类，例如“checkin”，但我还需要在td.disabled之前的所有td.selected上添加一个类“checkout”。结果应该是这样的：

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

任何想法

---

谢谢，这不能通过“checkin”类的CSS选择器来完成，因为您不能在选择器中引用前面的元素（但可以对另一半进行）

但是，您可以明智地使用

.filter

：

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

---

AFAIK这不能通过“checkin”类的CSS选择器来完成，因为您不能在选择器中引用前面的元素（但可以为另一半完成）

但是，您可以明智地使用

.filter

：

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

您可以分别使用和通过指定的选择器筛选同级：

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

您可以分别使用和，通过指定的选择器筛选同级：

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

---

您在文本中描述了一些不同的内容，但是代码可以通过使用来实现，您在文本中描述了一些不同的内容，但是代码可以通过使用来实现，并且只选择第一个和最后一个td with.selected类。不是前面或后面带有.disabled类的项目。是的，你说得对。您需要为选定的块选择一个选择器，然后应用first/last-child.quickly，这正是我认为很棘手的地方。在我的例子中，我可以让td.disabled，td.selected序列多次切换，我将编辑问题中的示例，因为我认为这不能通过使用first，last，first child，last child来实现（或者至少我无法理解），我会使用Jon或Frédéric Hamidi的方法。由于不能使用CSS选择前置程序，因此最好对所选块的两个边框使用jQuery的prev/next。这只会使用.selected类选择第一个和最后一个td。不是前面或后面带有.disabled类的项目。是的，你说得对。您需要为选定的块选择一个选择器，然后应用first/last-child.quickly，这正是我认为很棘手的地方。在我的例子中，我可以让td.disabled，td.selected序列多次切换，我将编辑问题中的示例，因为我认为这不能通过使用first，last，first child，last child来实现（或者至少我无法理解），我会使用Jon或Frédéric Hamidi的方法。因为你不能用CSS选择前置程序，所以最好对所选块的两个边界都使用jQuery的prev/next。非常感谢，解决了我的很多问题，似乎我不能同时接受你和Jon的答案，但为了其他人的缘故，这两个都能很好地工作。非常感谢，解决了我的很多问题，看来我不能同时接受你和乔恩的回答，但为了别人，这两个答案都很好。