將nth-child僞選擇器應用於特定的行類

我遇到了一些問題，我不確定它是瀏覽器還是CSS3。將nth-child僞選擇器應用於特定的行類

我有使用標準的HTML表格數據網格：

<table> 
    <thead> 
     ... 
    </thead> 
    <tbody> 
     <tr class="found"> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
     <tr class="found"> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
     <tr class="found"> 
      <td>...</td> 
      <td>...</td> 
      <td>...</td> 
     </tr> 
    </tbody> 
</table>

我有一個jQuery函數被搜索TD元素的含量。如果找到它，它將維護找到的類。如果找不到，那麼它將刪除找到的類並添加一個未找到的類。當然，沒有發現只是設置顯示：無

因此，搜索功能正在按我想要的方式工作。課程正在適當分配。但是，我使用CSS僞選擇器將樣式應用於交替行。

tr.found:nth-child(even) { 
    background: #fff; 
} 
tr.found:nth-child(odd) { 
    background: #000; 
}

在搜索發生之前這樣做很好。但是，在應用搜索和未找到的類之後，僞選擇器似乎只適用於元素而不是元素和類。要麼是這樣，要麼是在頁面加載過程中應用僞選擇器，並在該點保持靜態。

我可以通過我的jQuery搜索並重新分配特定的偶數和奇數類，但這會變得混亂。這不是什麼大問題，但是我的列標題是可排序的，所以我不得不重新申請該事件的類，並創建一種效率低下的方法來做我正在做的事情。如果數據樣本太大，您可能會反覆看到類更改，這是我試圖避免的。

對此的任何解決方案？

編輯

按照要求，我設置一個的jsfiddle所以你天才才能玩具吧：http://jsfiddle.net/bDePR/

搜索總裁祕書或將產生的行爲。

來源

2012-10-09 Brian

一個很好的問題 - 我可能會建議創建的jsfiddle例子讓大家有一個合理的起點工作從... –

@KP。 - 我已經按要求添加了JSFiddle。 – Brian

'tr.found：nth-child（偶數）'正在計算每個'tr'元素，而不僅僅是具有'found'類的'tr'元素，那就是你的問題。雖然我想不出一個像樣的解決方案..你可以從DOM中刪除元素並將它們放回。這可以工作，但不是很理想。嗯。好問題。 –

這是我能想到的最簡單的方法，使用jQuery：visible選擇器來查找所有可見的tr元素（在他們被排序後），然後簡單地將CSS應用於交替的元素！

// reset the background 
$j('tr').css('background', '#ccc'); 
$j('tr:visible').each(function(i){ 
    if((i % 2) == 0) { 
     // apply background to every other one 
     $j(this).css('background', 'yellow'); 
    } 
});

例如， http://jsfiddle.net/bDePR/1/

編輯：

此，通過@amustill不相同，但更高效/簡潔

// reset the background 
$j('tr').css('background', '#ccc'); 
$j('.found').filter(':odd').css({ background: 'yellow' });

來源

2012-10-09 19:37:25

這可能是最有效的解決方案...比替換DOM元素好多了。謝謝！ – Brian

事實上，這應該是這樣一個基本任務，這是矯枉過正。 –

兩件事。首先，不需要'：visible'選擇器，因爲所有的'.found'都是可見的，而且沒有上下文，效率非常低。另外，我認爲使用'$ j（'。found'）。filter（'：odd'）.css（{background：'yellow'）;'可以更有效地設置背景顏色。 – amustill

將nth-child僞選擇器應用於特定的行類

回答

相關問題