使用 jQuery 选择样式为“visibility:visible”或“visibility:hidden”而不是“display: none”的项目
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2279926/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using jQuery to select items that have style "visibility:visible" or "visibility:hidden" NOT "display: none"
提问by Peter Samuel
How do you select only visible elements using jQuery?
你如何使用 jQuery 只选择可见元素？
jQuery selectors :visible and :hidden only respects display:none as reallyhidden? NOT visibility:hidden or visibility:visible.
jQuery 选择器 :visible 和 :hidden 仅将 display:none 视为真正隐藏？不可见性：隐藏或可见性：可见。
I understand they are not technically hidden because they still take their space. I just want to know their state so I can check checkboxes that are visible.
我知道他们在技术上并不是隐藏的，因为他们仍然占据他们的空间。我只想知道它们的状态，以便我可以选中可见的复选框。
<!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>
回答by Guffa
You can use the cssfunction to get the style of the element, and the filterfunction to select them from a collection of elements:
您可以使用该css函数获取元素的样式，并使用该filter函数从元素集合中选择它们：
var visible = $('input[type=checkbox]').filter(function() {
return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});
回答by karim79
From the jQuery 1.3.2 release notes(:visible/:hidden Overhauled):
来自jQuery 1.3.2 发行说明(:visible/:hidden Overhauled)：
- In jQuery 1.3.1 (and older) an element was visible if its CSS
"display" was not "none", its CSS
"visibility" was not "hidden", and
its type (if it was an input) was not "hidden".- In jQuery 1.3.2 an element is visible if its browser-reportedoffsetWidth or offsetHeight isgreater than 0.
What does this change mean? It means that if your element's CSS display is "none", or any of its parent/ancestor element's display is "none", or if the element's width is 0 and the element's height is 0 then an element will be reported as hidden.
- 在 jQuery 1.3.1（及更早版本）中，如果一个元素的 CSS
“显示”不是“无”，它的CSS
“可见性”不是“隐藏”，并且
它的类型（如果它是一个输入）不是“隐藏的”，那么它是可见的”。- 在 jQuery 1.3.2 中，如果浏览器报告的offsetWidth 或 offsetHeight大于 0，则元素可见。
这种变化意味着什么？这意味着如果您的元素的 CSS 显示为“无”，或者其任何父/祖先元素的显示为“无”，或者如果元素的宽度为 0 且元素的高度为 0，则元素将被报告为隐藏。
回答by Kapitein Witbaard
I've created my own custom selector :shownfor this. Usage:
我已经创建了自己的自定义选择器：为此显示。用法：
var visible = $('input[type=checkbox]').is(':shown');
Or (etc):
或（等）：
$("#VisibleCount").text($("input[type=checkbox]:shown").length);
Just include this simple code somewhere:
只需在某处包含这个简单的代码：
jQuery.extend(jQuery.expr[':'], {
shown: function (el, index, selector) {
return $(el).css('visibility') != 'hidden' && $(el).css('display') != 'none' && !$(el).is(':hidden')
}
});
