本文介绍了使用jQuery来选择具有样式“可见性：可见”的项目。或“可见性：隐藏” NOT“display：none”的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何使用jQuery仅选择可见元素？
How do you select only visible elements using jQuery?
jQuery选择器：visible和：hidden仅尊重display：none as really hidden ？不可见性：隐藏或可见性：可见。
jQuery selectors :visible and :hidden only respects display:none as really hidden? NOT visibility:hidden or visibility:visible.
我理解他们不是技术上隐藏的。我只想知道他们的状态，所以我可以选中可见的复选框。
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>
推荐答案
您可以使用 css 函数来获取元素的样式，过滤器函数从一组元素中选择它们：
You can use the css function to get the style of the element, and the filter function to select them from a collection of elements:
var visible = $('input[type=checkbox]').filter(function() {
return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});
这篇关于使用jQuery来选择具有样式“可见性：可见”的项目。或“可见性：隐藏” NOT“display：none”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！