2010-06-04 18 views
32

Esto no funciona, ¿o sí? O se puede detener el error si otra línea podría hacer lo mismo:test if display = none

function doTheHighlightning(searchTerms) { 
    // loop through input array of search terms 
    myArray = searchTerms.split(" "); 
    for(i=0;i<myArray.length;i++) 
    { 
     // works. this line works if not out commented. Will highlight all words, also in the hidden elements 
     //$('tbody').highlight(myArray[i]); 

     // not working when trying to skip elements with display none... 
     $('tbody').css('display') != 'none').highlight(myArray[i]); 
    } 

    // set background to yellow for highlighted words 
    $(".highlight").css({ backgroundColor: "#FFFF88" }); 
} 

necesito para filtrar filas de una tabla y el color de alguna palabra. Los datos se han convertido en mucho para el color si se eligen muchas palabras. Así que trataré de limitar la coloración yendo solo a través de ninguno de los elementos ocultos.

Respuesta

44

Si desea obtener las visibles tbody elementos, se puede hacer esto:

$('tbody:visible').highlight(myArray[i]); 

Se se parece a la respuesta que Agent_9191 dio, pero esta elimina el espacio del selector, lo que lo hace selecciona los elementos tbody visibles en lugar de los descendientes visibles.


EDIT:

Si quería específicamente para utilizar una prueba en la propiedad display CSS de los tbody elementos, se puede hacer esto:

$('tbody').filter(function() { 
    return $(this).css('display') != 'none'; 
}).highlight(myArray[i]); 
+0

Hola. El tbody: visible hace el truco muy bien. Puede buscar una gran cantidad de datos y solo resaltar el texto que se muestra. Estupendo. – Tillebeck

+3

@Tillebeck - Para que lo entiendas, un 'espacio' en un selector es un operador importante. Significa que estás buscando un descendiente. Entonces 'tbody: visible' busca elementos' tbody' que son 'visibles', mientras que' tbody: visible' busca * descendientes * de 'tbody' que son': visible'. ¡La mejor de las suertes! :) – user113716

1
$('tbody').find('tr:visible').hightlight(myArray[i]); 
5

Tal vez puedas probar a seleccionar solamente los elementos visibles bajo la tbody:

$('tbody :visible').highlight(myArray[i]); 
+0

Por alguna razón, no funciona. Al eliminar el espacio entre tbody y: visible (tbody: visible), entonces funciona. No puedo decir si debería funcionar (es posible que tenga un software defectuoso en ejecución, no lo sé). Pero muchas gracias por tu respuesta. Lo siento, pero marqué la respuesta de Patricks como correcta, aunque era casi una copia de la suya ;-) – Tillebeck

43

uso como esto:

if($('#foo').is(':visible')) { 
    // it's visible, do something 
} 
else { 
    // it's not visible so do something else 
} 

H ¡Opera ayuda!

+3

No es una buena práctica pero creo que esta es la mejor manera para los principiantes. – tersakyan

+0

Esto funciona muy bien para slideToggle e IE8 porque IE considera que el relleno es la altura #justSayin –

+3

@tersakyan ¿Cuál es la mejor práctica aquí? –

1

Como @ Agent_9191 y @partick mencionado se debe utilizar

$('tbody :visible').highlight(myArray[i]); // works for all children of tbody that are visible 

o

$('tbody:visible').highlight(myArray[i]); // works for all visible tbodys 

Además, ya que parece ser la aplicación de una clase a las palabras resaltadas, en lugar de utilizar jQuery para alterar el fondo para todos los resaltados combinados, simplemente cree una regla CSS con el color de fondo que necesita y se aplica directamente una vez que asigne la clase.

.highlight { background-color: #FFFF88; } 
+0

Super. Gracias por la explicación.Eso puede explicar por qué solo funciona el último (tbodys visibles). Y sí. CSS debe entrar en el archivo CSS y no estar definido en varios archivos js. Tanto para el rendimiento como para que los chicos del diseño no se frustren :-) Lo harán. – Tillebeck

Cuestiones relacionadas