使用jQuery选择具有“visibility：visible”或“visibility：hidden”样式的项目NOT“display：none”

你如何使用jQuery仅选择可见元素？

jQuery选择器：可见和：隐藏只尊重显示：无实时隐藏？ NOT visibility：hidden或visibility：visible。

我知道他们在技术上并不隐藏， 因为他们仍然占据了他们的空间 。 我只是想知道他们的状态，所以我可以查看可见的复选框。

      $(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 });   #TestArea { border: solid red 1px; } #Results { background-color: Lime; } .container { border: solid black 1px; }    
 
 visibility: hidden;
  
 
 
 visibility: visible;
  
 
 
 display: none;
  
 
 
 display: inline;
  
 
 
 
 
 Visible Count:  
 
 Hidden Count:  
 
   

Answer 1

您可以使用css函数获取元素的样式，并使用filter函数从元素集合中选择它们：

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

Answer 2

从jQuery 1.3.2发行说明 （：visible /：hidden Overhauled）：

• 在jQuery 1.3.1（和更早版本）中，如果一个元素的CSS可见
  它的CSS是“显示”不是“无”
  “能见度”并非“隐藏”，而且
  它的类型（如果是输入）不是“隐藏”的。
• 在jQuery 1.3.2中，如果浏览器报告的 offsetWidth或offsetHeight 大于0， 则元素是可见的 。

这种变化意味着什么？ 这意味着如果元素的CSS显示为“none”，或者其父/祖先元素的任何显示为“none”，或者元素的宽度为0且元素的高度为0，则元素将报告为隐藏。

Answer 3

我已经创建了自己的自定义选择器：为此显示。 用法：

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

或（等）：

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

只需在这里包含这个简单的代码：

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