Pet*_*uel 16 css jquery visibility jquery-selectors
如何使用jQuery仅选择可见元素？
jQuery选择:可见光和:隐藏只有尊重显示:没有为真正隐藏？NOT visibility:隐藏或可见性:可见.
我知道他们在技术上并不隐藏,因为他们仍然占据了他们的空间.我只是想知道他们的状态,所以我可以查看可见的复选框.
<!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>
Guf*_*ffa 42
您可以使用该css函数来获取元素的样式,以及filter从元素集合中选择它们的函数:
var visible = $('input[type=checkbox]').filter(function() {
return !($(this).css('visibility') == 'hidden' || $(this).css('display') == 'none');
});
kar*_*m79 11
从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,则元素将报告为隐藏.
我已经创建了自己的自定义选择器:为此显示.用法:
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')
}
});
| 归档时间： |
|
| 查看次数： |
34550 次 |
| 最近记录： |