2009-09-28 10 views
5

tengo este simple marcado HTML generado a partir de ASP clásico:¿Por qué mi oculto <tr> no está realmente oculto?

<table> 
    <tr class="trClass"> 
    <td>Hello </td> 
    </tr> 
    <tr class ="trClass"> 
    <td>World!</td> 
    </tr> 
</table> 

si fijo el tr perteneciente a Hola ocultar() usando jQuery que oculta. ¡Bueno!

Pero, cuando uso este $ ('. TrClass: visible'). Cada (función() {alerta ('visible')}); muestra la salida 'visible' dos veces.

¿Por qué es esto?

Mi problema aquí es que estoy filtrando una tabla en una columna con un cuadro de selección. Pero después del filtrado necesito realizar algunos cálculos en esas filas que son visibles en la tabla, pero ahora obtengo todas las filas.

¿Alguna idea?

/Daniel

+0

¿Puedes proporcionar una página de demostración por favor? –

+0

¿Qué navegador? ? –

+0

¿Qué versión de jQuery? 1.3.2? –

Respuesta

13

El selector :visible no prueba la propiedad display estilo, que desea utilizar en su lugar :hidden, the 1.3.2 release notes say:

... si CSS display de su elemento es "ninguna", o cualquiera de sus elemento primario/ancestro muestra "ninguno", o si el ancho del elemento es 0 y la altura del elemento es 0, entonces un elemento será informado como oculto.

Estos serán correctamente elegir sus filas visibles:

$('.trClass:not(:hidden)').each(function() { 
    alert('visible'); 
}); 

o:

$('.trClass').each(function() { 
    if(!$(this).is(':hidden')) { 
     alert('visible'); 
    } 
}); 

o:

$('.trClass').filter('not:(:hidden)').each(function() { 
    alert('visible'); 
}); 

hide establece el estilo de display="none". El release notes para jQuery 1.3.2 también dicen:

En jQuery 1.3.2 un elemento es visible si su navegador informado offsetWidth o offsetHeight es mayor que 0.

así que supongo que en en este caso, el selector :visible erróneamente no coincide con nada porque las filas no ocupan ningún espacio de acuerdo con los cálculos realizados, a pesar de que su propiedad CSS display es no establecida en none. Por el contrario, :hidden coincide correctamente con los elementos con style="display:none", por lo que las pruebas para elementos que no sean :hidden funcionan bien.

+0

Ni ': hidden' ni': visible' verifican la propiedad de visualización. Compruebe la fuente usted mismo: http://dev.jquery.com/browser/tags/1.3.2/src/selector.js#L957 –

+0

Es un error legítimo según el propio Resig: http://www.nabble.com/ Re: -Bug-with-: hidden-selector-and-tbody-in-Internet - Explorer-p24631644s27240.html –

+0

@crescentfresh - gracias por eso. He actualizado mi respuesta. – karim79

2

No estoy seguro de si esto importa, pero no oculta() configuró display: none; y no visible: hidden? Lo que significa que una fila oculta sigue siendo visible, simplemente no se muestra ...

0

es probable que su trClass colisione con la pantalla: ninguno que .hide() establezca. cuando una etiqueta tiene atributos de clase y estilo solo se aplicará. debe insertar de cerca su trClass y sacar la pantalla: cosas de ella.

4

You've found a legitimate bug. Está roto en 1.3.2 pero ahora fixed in trunk.

According to Resig:

que ya observamos en el caso de 'tr' que tiene el mismo problema, en IE

pensado que le gustaría saber ...

+0

y qué causó el error? – xxxxxxx

+0

@ spx2: regresión en 1.3.2. Las versiones anteriores marcaban la propiedad 'display'. 1.3.2 usó un truco para verificar las [falta de] dimensiones del elemento. Ver la primera cita de @karim79. –

+1

@ spx2 - Como siempre, fueron los programadores. – aehiilrs

Cuestiones relacionadas