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();

Answer 3

你可以这两种方式：你可以为display: none元素添加另一个类，并通过css使它们不可见，或者你可以通过jquery找到css属性

通过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();
  }
});

Answer 4

您可以使用:not()选择器并过滤结果，然后再进入.each()：

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

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

4 个答案:

通过css类

HTML

CSS

JS

通过jquery