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.disabled之后的所有td.selected上，但我还需要在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>

任何想法，

由于

Answer 1

您可以分别使用next()和prev()，通过您指定的选择器过滤兄弟姐妹：

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

Answer 2

AFAIK这不能用“checkin”类的CSS选择器完成，因为你不能在选择器中引用前面的元素（虽然可以在另一半中完成）。

但是，您可以明智地使用.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

Answer 3

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

jQuery选择跟随或带有给定类的元素的所有元素

3 个答案: