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選擇所有後續元素或預先給定類的元素

回答

相關問題