Para seleccionar todos los elementos visibles u ocultos en una página usando jQuery, podemos usar los siguientes selectores de jQuery:
:Selector visible El Selector visible se utiliza para seleccionar todos los elementos que están actualmente visibles en el documento.
- Sintaxis:
$(":visible")
:selector oculto El selector oculto selecciona elementos ocultos para trabajar.
- Sintaxis:
$(":hidden")
El siguiente ejemplo ilustra el enfoque anterior:
Ejemplo:
<!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>
Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA