特定の行クラスにnth-child疑似セレクタを適用する

Question

ブラウザのものかCSS3のものかどうか不明な点が少しあります。

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

私はTD要素の内容を検索しているjQueryの機能を持っている：

は、私は、標準のHTMLテーブルを使用してデータグリッドを持っています。見つかった場合は、見つかったクラスを維持します。見つからなければ、見つかったクラスを削除し、見つからないクラスを追加します。当然、見つからないだけで表示が設定されます：なし

検索機能は私が望むように動作しています。クラスは適切に割り当てられています。しかし、CSSの擬似セレクタを使用して、行を交互に切り替えるスタイルを適用しています。

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

これは、検索が行われる前に素晴らしい結果を出します。しかし、検索後、見つからないクラスが適用されると、擬似セレクタは、要素およびクラスではなく、要素にのみ適用されるように見えます。どちらか、または擬似セレクタはページ読み込み中に適用され、その時点で静的になります。

私はjQueryの検索を行って、特定の偶数クラスと奇数クラスを再割り当てできますが、それは面倒です。それは大したことではありませんが、私の列ヘッダーはソート可能ですので、そのイベントでクラスを再適用して、やっていることを効率的に実行しないでください。データサンプルが大きすぎると、クラスの変更が反復的に見える可能性があります。回避しようとしているものです。

これに対する解決策はありますか？

EDIT

要求され、IセットアップJSFiddleとして、あなたの天才はそれでおもちゃできるよう：http://jsfiddle.net/bDePR/

会長や事務局長の検索は動作が得られます。

Answer 1

これは最も簡単な方法ですが、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' });