How to select all visible or hidden elements in a HTML page using jQuery ?
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")
:hidden Selector The hidden selector selects hidden elements to work upon.
- Syntax:
$(":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; } .Beginner { display: inline-block; font: bold 16px sans-serif; color: green; } .hidden { display: none; } </ style > </ head > < body > < h1 >w3wiki</ h1 > < h3 > How to select all visible or hidden elements< br >in a HTML page using jQuery </ h3 > < div class = "Beginner" >w3wiki</ div > < div class = "Beginner hidden" > A Computer Sciecne Portal </ div > < div class = "Beginner" >For Beginner</ div > < div class = "Beginner 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($(".Beginner"), 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($(".Beginner"), function() { if ($(this).is(":hidden")) { hiddenBoxes.push($(this).text()); } }); $("h4").text("Hidden items are - " + hiddenBoxes.join(", ")); }); }); </ script > </ body > </ html > |
Output:
Contact Us