gpt4 book ai didi

jquery - 使用 jQuery 选择样式为 "visibility:visible"或 "visibility:hidden"NOT "display: none"的元素

转载 作者:技术小花猫 更新时间:2023-10-29 10:17:59 26 4
gpt4 key购买 nike

如何使用 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>

最佳答案

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

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

关于jquery - 使用 jQuery 选择样式为 "visibility:visible"或 "visibility:hidden"NOT "display: none"的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2279926/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com