javascript - saber - Usando jQuery, ¿cómo se encuentran solo los elementos visibles y se dejan los elementos ocultos solos?

getelementsbyclassname value

Question

Entonces comienzo con los artículos 1-4:

<div class="someDiv bold italic" style="display: none;">Lorem</div>
<div class="someDiv regular italic" style="display: block;">Lorem</div>
<div class="someDiv bold" style="display: none;">Ipsum</div>
<div class="someDiv regular" style="display: block;">Ipsum</div>

Luego tengo algunas casillas de verificación de entrada:

<input class="regular" type="checkbox" />
<input class="bold" type="checkbox" />
<input class="italic" type="checkbox" />

Así que básicamente tengo jQuery mostrando y ocultando divs. Ahora tengo otra función que debe iterar a través de estos divs (uno para cada casilla de verificación) y mostrar / ocultar en función de otros criterios. Pero no quiero que los divs ya ocultos se muestren nuevamente.

$(".someDiv").each(function(){
  if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  };

En este ejemplo, el único div restante debe ser el último div. Desafortunadamente, este código hará que se muestren los segundos y cuartos divs.

Este código es un ejemplo muy básico de todos los filtros que voy a aplicar, agregar, etc.

Answer 1

Podrías hacer esto de dos maneras: podrías agregar otra clase para la display: none elemento y hacerlos invisibles a través de css, o podrías encontrar la propiedad css a través de jquery

a través de la clase css

html

<div class="someDiv bold italic hidden" >Lorem</div>
<div class="someDiv regular italic" >Lorem</div>
<div class="someDiv bold hidden" >Ipsum</div>
<div class="someDiv regular" >Ipsum</div>

css

.someDiv{
    display: block;
}

.hidden{
    display: none;
}

js

$(".someDiv").each(function(){
  if($(this).hasClass("hidden")){
    $(this).show();
  } else {
    $(this).hide();
  };

vía jquery

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});

Answer 2

Puede usar :visible selector :visible para seleccionar .someDiv que esté visible.

$(".someDiv:visible").each(function(){
 if($(this).hasClass("regular")){
    $(this).show();
  } else {
    $(this).hide();
  }
});

Aquí hay otra forma divertida de utilizar el encadenamiento :) y hacerlo de una sola línea.

$(''.someDiv:visible'').not($(''.someDiv.regular:visible'')).hide();

Answer 3

Puede usar el selector :visible para encontrar solo visible.

$(".someDiv:visible").each(....);

Puede usar el selector .not() para buscar solo oculto.

$(".someDiv").not(":visible").each(....);

Creo que puedes realizar la misma operación en tu código con esta línea.

$(".someDiv").hide().find(".regular").show();

Encuentra todos .someDiv y .someDiv , luego encuentra aquellos con una clase .regular y muéstrales.

Answer 4

Puede usar el selector :not() para eso y filtrar los resultados antes de entrar en .each() :

$(".someDiv:not(:hidden)").each(function(){