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