jQuery选择所有后续元素或预先给定类的元素

我有一个jQuery的CSS选择器对待塔尔精明的。jQuery选择所有后续元素或预先给定类的元素

我在与行的顺序的表，如下面示出的一个：

<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之后，还需要在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>

任何想法，

感谢

来源

2012-03-27 learnAndImprove

您介绍不同的东西在你的文字，但可以使用可实现的代码['$（”选择。：first'）']（http://api.jquery.com/first-selector/）和['$（'.selected：last'）']（http://api.jquery.com/last-selector /） – m90 2012-03-27 08:03:23

AFAIK这不能用CSS选择“签入”类来完成的，因为你不能引用前 elemen在选择器（它可以完成另一半虽然）。

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

来源

2012-03-27 08:06:22 Jon

谢谢你，Jon，你和Frederic解决方案都能很好地工作。 – learnAndImprove 2012-03-27 08:20:09

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

来源

2012-03-27 08:02:19

只选择使用.selected类的第一个和最后一个td。不是之前或之后有.disabled类的项目。 – mamoo 2012-03-27 08:03:57

是的，你是对的。你需要选择块的选择器，然后应用第一个/最后一个孩子。 – 2012-03-27 08:06:38

确切地说，这就是我认为的棘手问题。在我的情况下，我可以有td.disabled，td.selected序列多次切换，我将编辑示例的问题，因为我认为这不能实现（或至少我不明白）通过使用第一个，最后一个孩子，最后一个孩子 – learnAndImprove 2012-03-27 08:09:52

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

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

来源

2012-03-27 08:09:41

非常感谢，解决了我的一些麻烦，看来我不能接受你和Jons的回答，但为了其他人都工作得很好。 – learnAndImprove 2012-03-27 08:20:51

jQuery选择所有后续元素或预先给定类的元素

回答

相关问题