Используя jQuery, как вы находите только видимые элементы и оставляете только скрытые элементы?

Итак, я начинаю с пунктов 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>

Затем у меня есть флажки ввода:

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

Итак, в основном у меня есть jQuery, показывающий и скрывающий div. Теперь у меня есть другая функция, которая должна проходить через эти div (по одному для каждого флажка) и показывать/скрывать на основе других критериев. Но я не хочу, чтобы уже скрытые divs отображались снова.

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

В этом примере единственным оставшимся div должен быть последний div. К сожалению, этот код сделает отображение второго и четвертого div.

Этот код является очень простым примером всех фильтров, которые я буду применять, добавления и т.д.

Ответы

Ответ 1

Вы можете использовать селектор : visible для поиска только видимого.

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

Вы можете использовать селектор .not(), чтобы найти только скрытые.

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

Я думаю, что вы можете выполнить одну и ту же операцию в своем коде с помощью этой одной строки.

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

Найдите все .someDiv и скройте их, затем найдите те, у которых есть класс .regular, и покажите их.

Ответ 2

Вы можете использовать селектор :visible для выбора видимых .someDiv.

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

Вот еще один забавный способ использования цепочки:) и создания его одной строки.

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

Ответ 3

Вы можете использовать селектор :not() для этого и фильтровать результаты перед тем, как перейти в .each():

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

Ответ 4

Вы можете сделать это двумя способами: вы можете добавить еще один класс для элементов display: none и сделать их невидимыми с помощью css, или вы можете узнать свойство css через jquery

через класс 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();
  };

через jquery

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