Как выбрать все видимые или скрытые элементы на странице с помощью jQuery
Вы можете просто использовать jQuery-селектор :visible или :hidden для выбора всех видимых или скрытых элементов на HTML-странице. jQuery-селектор :visible считается видимым элементом, если он занимает место в документе. Это означает, что элементы с visibility: hidden; или opacity: 0; считаются видимыми, поскольку они по-прежнему сохраняют пространство в макете.
Давайте посмотрим следующий пример, чтобы понять, как это работает:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Get All Visible and Hidden Elements</title>
<script src="//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>
