Uso de jQuery para seleccionar elementos que tienen el estilo "visibility: visible" o "visibility: hidden" NOT "display: none"

¿Cómo se seleccionan solo los elementos visibles usando jQuery?Uso de jQuery para seleccionar elementos que tienen el estilo "visibility: visible" o "visibility: hidden" NOT "display: none"

jQuery selectores: visible y: solo respeta la visualización: ninguno como realmente escondido? NO visibilidad: oculta o visibilidad: visible.

Entiendo que técnicamente no están ocultos because they still take their space. Solo quiero saber su estado para poder marcar las casillas que están visibles.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>jQuery :visiblity Selector Test</title> 

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#VisibleCount").text($("input[type=checkbox]:visible").length); //returns 3. I think it should be 2 
     $("#HiddenCount").text($("input[type=checkbox]:hidden").length); //returns 1. I think it should be 2 
    }); 
</script> 

<style type="text/css"> 
    #TestArea 
    { 
     border: solid red 1px; 
    } 
    #Results 
    { 
     background-color: Lime; 
    } 
    .container 
    { 
     border: solid black 1px; 
    } 
</style> 
</head> 
<body> 
<div id="TestArea"> 
    <div class="container"> 
     visibility: hidden;<div style="visibility: hidden;"> 
      <input id="Checkbox1" type="checkbox" /> 
     </div> 
    </div> 
    <div class="container"> 
     visibility: visible;<div style="visibility: visible;"> 
      <input id="Checkbox2" type="checkbox" /> 
     </div> 
    </div> 
    <div class="container"> 
     display: none;<div style="display: none;"> 
      <input id="Checkbox3" type="checkbox" /> 
     </div> 
    </div> 
    <div class="container"> 
     display: inline;<div style="display: inline;"> 
      <input id="Checkbox4" type="checkbox" /> 
     </div> 
    </div> 
</div> 
<div id="Results"> 
    <div> 
     Visible Count: <span id="VisibleCount"></span> 
    </div> 
    <div> 
     Hidden Count: <span id="HiddenCount"></span> 
    </div> 
</div> 
</body> 
</html>

Fuente

2010-02-17 Peter Samuel

Usted puede utilizar la función css para conseguir el estilo del elemento, y la función filter para seleccionarlos de una colección de elementos:

var visible = $('input[type=checkbox]').filter(function() { 
    return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none'); 
});

Fuente

2010-02-17 11:01:21 Guffa

+1 por proporcionar una solución (incluso si no descubrió lo que está sucediendo :) – karim79

¡Genial, gracias chicos! Terminé usando esto con el encadenamiento para reducir mi conjunto de resultados:. $ ("input [type = casilla]") filtrar (function() { \t \t \t \t retorno ((este) css ('visibilidad $! ') ==' oculto '|| $ (esto).css ('display') == 'none'); \t \t \t}) cada uno (function() { \t \t \t \t this.checked = true;. \t \t \t}); –

También verifique mi respuesta para obtener más reutilización con un selector de jquery personalizado. –

Desde el jQuery 1.3.2 release notes (Visible /: oculto Overhauled):

En jQuery 1.3.1 (o más) era un elemento visible si su CSS
"pantalla" no era "ninguno", su CSS
"visibilidad" no era "oculta", y
su tipo (si era una entrada) se no "oculto".

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

¿Qué significa este cambio? Significa que si la pantalla CSS de su elemento es "ninguno", o cualquiera de sus elementos principales/ancestros es "ninguno", o si el ancho del elemento es 0 y la altura del elemento es 0, entonces un elemento será informado como oculto.

Fuente

2010-02-17 10:46:57 karim79

+1 para la excavación de lo que está pasando (aunque no proporciona una solución al problema). – Guffa

He creado mi propio selector personalizado : se muestra para esto. Uso:

var visible = $('input[type=checkbox]').is(':shown');

O (etc):

$("#VisibleCount").text($("input[type=checkbox]:shown").length);

basta con incluir este código simple en alguna parte:

jQuery.extend(jQuery.expr[':'], { 
    shown: function (el, index, selector) { 
    return $(el).css('visibility') != 'hidden' && $(el).css('display') != 'none' && !$(el).is(':hidden') 
    } 
});

Fuente

2015-11-13 09:15:40

Uso de jQuery para seleccionar elementos que tienen el estilo "visibility: visible" o "visibility: hidden" NOT "display: none"

Respuesta

Cuestiones relacionadas