How to select all visible or hidden elements in a HTML page using jQuery ? - GeeksforGeeks

18 Mar, 2020
In order to select all visible or hidden elements in a page using jQuery, we can use the following jQuery selectors:
:visible Selector The visible Selector is used to select all the elements that are currently visible in the document.
Syntax:$(":visible") 
$(":visible") 
:hidden Selector The hidden selector selects hidden elements to work upon.
Syntax:$(":hidden")
$(":hidden")
Below example illustrates the above approach:Example:
<!DOCTYPE html><html>  <head>    <title>        How to select all visible        or hidden elements in a        HTML page using jQuery ?    </title>      <script src="https://code.jquery.com/jquery-1.12.4.min.js">    </script>          <style>        h1 {            color: green;        }                  h4 {            color: green;        }                  body {            text-align: center;        }                  .geeks {            display: inline-block;            font: bold 16px sans-serif;            color: green;        }                  .hidden {            display: none;        }    </style></head>  <body>    <h1>GeeksforGeeks</h1>          <h3>         How to select all visible or        hidden elements<br>in a HTML        page using jQuery    </h3>          <div class="geeks">GeeksforGeeks</div>          <div class="geeks hidden">        A Computer Sciecne Portal    </div>          <div class="geeks">For Geeks</div>          <div class="geeks hidden">        Learn Contribute Explore    </div>    <br>          <button type="button" class="visibleg">        Visible    </button>          <button type="button" class="hiddeng">        Hidden    </button>    <br>          <h4></h4>          <script>        $(document).ready(function() {            $(".visibleg").click(function() {                var visibleBoxes = [];                $.each($(".geeks"), function() {                    if ($(this).is(":visible")) {                        visibleBoxes.push($(this).text());                    }                });                $("h4").text("Visible items are - "                            + visibleBoxes.join(", "));            });              // Get hidden items            $(".hiddeng").click(function() {                var hiddenBoxes = [];                $.each($(".geeks"), function() {                    if ($(this).is(":hidden")) {                        hiddenBoxes.push($(this).text());                    }                });                $("h4").text("Hidden items are - "                             + hiddenBoxes.join(", "));            });        });    </script></body>  </html>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
jQuery-Misc
HTML
JQuery
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML
Design a web page using HTML and CSS
Form validation using jQuery
Angular File Upload
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?