javascript - 使用 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 类的那些并显示它们。