如何使用 jQuery 选择页面中的所有可见或隐藏元素
答案:使用 jQuery :visible 和 :hidden 选择器
您可以简单地使用 jQuery :visible 或 :hidden 选择器来选择 HTML 页面中所有可见或隐藏的元素。 如果 jQuery :visible 选择器占用了文档中的空间，则认为元素可见。 这意味着，带有 visibility: hidden; 或 opacity: 0; 的元素被认为是可见的，因为它们仍然保留布局中的空间。
让我们试试下面的例子来了解它的基本工作原理:
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery 获取所有可见和隐藏的元素</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.box{
padding: 50px;
margin: 20px 0;
display: inline-block;
font: bold 22px sans-serif;
background: #f4f4f4;
}
.hidden{
display: none;
}
</style>
<script>
$(document).ready(function() {
/* 获取可见框 */
$(".get-visible-btn").click(function(){
var visibleBoxes = [];
$.each($(".box"), function(){
if($(this).is(":visible")) {
visibleBoxes.push($(this).text());
}
});
alert("Visible boxes are - " + visibleBoxes.join(", "));
});
/* 获取隐藏框 */
$(".get-hidden-btn").click(function(){
var hiddenBoxes = [];
$.each($(".box"), function(){
if($(this).is(":hidden")) {
hiddenBoxes.push($(this).text());
}
});
alert("Hidden boxes are - " + hiddenBoxes.join(", "));
});
});
</script>
</head>
<body>
<div class="box">Box A</div>
<div class="box hidden">Box B</div>
<div class="box">Box C</div>
<div class="box hidden">Box D</div>
<div class="box">Box E</div>
<br>
<button type="button" class="get-visible-btn">Get Visible Boxes</button>
<button type="button" class="get-hidden-btn">Get Hidden Boxes</button>
</body>
</html>FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答:
