Aplicar pseudo selector nth-child a una clase de fila específica

Question

Tengo un problema que no estoy seguro de si es algo del navegador o de CSS3.

Tengo una cuadrícula de datos mediante una tabla HTML estándar:

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

Tengo una función jQuery que está buscando los contenidos de los elementos TD. Si se encuentra, mantiene la clase encontrada. Si no se encuentra, elimina la clase encontrada y agrega una clase no encontrada. Naturalmente, no encontrado solo configura la pantalla: ninguno

Así que la función de búsqueda funciona de la manera que me gustaría. Las clases se asignan apropiadamente. Sin embargo, estoy usando pseudo selectores CSS para aplicar estilo a filas alternativas.

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

Esto funciona muy bien antes de realizar una búsqueda. Sin embargo, después de aplicar una búsqueda y aplicar la clase no encontrada, el pseudo selector parece aplicar solo al elemento en lugar del elemento y la clase. O eso, o los pseudo selectores se aplican durante la carga de la página y se dejan estáticos en ese punto.

Podría ir a través de mi búsqueda jQuery y reasignar clases pares e impares específicas, pero eso se complica. No sería tan importante, pero los encabezados de mis columnas son ordenables, así que tendré que volver a aplicar las clases en ese evento y crear un tipo de método ineficiente para hacer lo que estoy haciendo. Si las muestras de datos son demasiado grandes, es probable que puedas ver los cambios de clase de forma iterativa, algo que intento evitar.

¿Alguna solución para esto?

EDITAR

Conforme a lo solicitado, I fijó un jsFiddle genios para que pueda jugar con él: http://jsfiddle.net/bDePR/

Buscando Presidente o Secretario rendirá el comportamiento.

Answer 1

Este es el método más simple que pude idear, use el selector jQuery: visible para encontrar todos los elementos tr visibles (después de que hayan sido ordenados) y luego simplemente aplique CSS a los alternativos.

// 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'); 
    } 
}); 

e.g. http://jsfiddle.net/bDePR/1/

Editar:

Esto, por @amustill hace lo mismo, pero es más eficiente/concisa

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