Selector JQUERY elementos ocultos

Home » Blog » Selector JQUERY elementos ocultos

Vamos a ver como podemos seleccionar elementos en función de su visibilidad. Podemos elegir los elementos que estén visibles con el comando :visible o los que estén ocultos :hidden.

Selectores :visible y :hidden

<!DOCTYPE html>
<html>
<head>
<title>Selectores de visibilidad</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function(){ 
$('ul:visible').hide();
}); 
$('h2').click(function(){ 
$('ul:hidden').show();
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
.oculto{
display:none;
}
</style>
</head>
<body>
<h1 id='miId'>Ocultar las listas visibles</h1> 
<ul>
<li class="pr">
Lista 1
</li>
<li>
Lista 2
</li>
<li class="pr">
Lista 3
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
<h2>Visualizar las listas invisibles</h2>
<div></div>
<ul class='oculto'>
<li>
2 Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2"> 
<a href=''>Esto es un enlace con elemento</strong> hijo strong</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
</body>
</html>

Con muy pocas líneas de JQUERY podemos conseguir uno de los efectos más usados, ocultar y mostrar contenido en función de las acciones del usuario con los elementos del HTML. Si pensamos otra forma de hacerlo, sería mucho más complejo.

$('ul:visible').hide();

Oculta (hide) los elementos ul que están visibles. En el ejemplo, al principio hay 1 pero si pinchamos en el segundo enlace habrá 2.

$('ul:hidden').show();

Muestra (show) los ul que están visibles. Y eso es todo.

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023

Comentarios

Deja una respuesta