使用 jQuery 选择样式为“visibility:visible”或“visibility:hidden”而不是“display:none”的项目
Posted
技术标签:
【中文标题】使用 jQuery 选择样式为“visibility:visible”或“visibility:hidden”而不是“display:none”的项目【英文标题】：Using jQuery to select items that have style "visibility:visible" or "visibility:hidden" NOT "display: none" 【发布时间】：2011-01-17 19:20:30 【问题描述】：如何使用 jQuery 只选择可见元素？
jQuery 选择器 :visible 和 :hidden 仅将 display:none 视为 真的 隐藏？不可见性：隐藏或可见性：可见。
我知道它们在技术上并不隐藏because they still take their space。我只想知道它们的状态，以便我可以检查可见的复选框。
<!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>
【问题讨论】：
【参考方案1】：来自jQuery 1.3.2 release notes（：可见/：隐藏大修）：
在 jQuery 1.3.1（及更早版本）中，如果元素的 CSS 则元素可见 “display”不是“none”，它的CSS“visibility”不是“hidden”，并且 它的类型（如果它是输入）不是 “隐藏”。 在 jQuery 1.3.2 一个元素在浏览器报告时可见 offsetWidth 或 offsetHeight 是 大于 0。这种变化意味着什么？它的意思是 如果你的元素的 CSS 显示是 “无”，或其任何父/祖先 元素的显示为“无”，或者如果 元素的宽度为 0 并且元素的 高度为 0 则元素将是 报告为隐藏。
【讨论】：
+1 用于挖掘正在发生的事情（即使它不能解决问题）。【参考方案2】：您可以使用css 函数获取元素的样式，并使用filter 函数从元素集合中选择它们：
var visible = $('input[type=checkbox]').filter(function()
return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
);
【讨论】：
+1 用于提供解决方案（即使您没有挖掘正在发生的事情 :) 太好了，谢谢大家！我最终使用它与链接来减少我的结果集： $("input[type=checkbox]").filter(function() return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none'); ).each(function() this.checked = true; ); 还可以使用自定义 jquery 选择器检查我的答案以获得更多可重用性。【参考方案3】：为此，我创建了自己的自定义选择器 :shown。用法：
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')
);
【讨论】：
以上是关于使用 jQuery 选择样式为“visibility:visible”或“visibility:hidden”而不是“display:none”的项目的主要内容，如果未能解决你的问题，请参考以下文章