使用jQuery,如何只找到可见元素并单独留下隐藏元素？

Question

所以我从第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的函数(每个复选框一个),并根据另一个标准显示/隐藏.但我不希望再次显示已经隐藏的div.

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

在这个例子中,唯一剩下的div应该是最后一个div.不幸的是,这段代码将显示第二和第四个div.

这段代码是我将要应用的所有过滤器的基本示例,添加等.

Answer 1

您可以使用:visible选择器查找仅可见.

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

您可以使用.not()选择器仅查找隐藏的.

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

我认为您可以使用这一行在代码中执行相同的操作.

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

找到所有.someDiv并隐藏它们,然后找到那些有.regular类并显示它们的人.

Answer 2

您可以使用:visible选择器来选择.someDiv可见的.

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

这是利用链接的另一个有趣的方式:)并使其成为单行.

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