使用 jQuery，你如何只找到可见元素而留下隐藏元素？

Posted 2023-02-24

【中文标题】使用 jQuery，你如何只找到可见元素而留下隐藏元素？

【英文标题】：Using jQuery, how do you find only visible elements and leave hidden elements alone?

【发布时间】：2013-05-22 21:15:25

【问题描述】：

所以我从第 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。

这段代码是我将要应用、添加等所有过滤器的非常基本的示例。

【参考方案1】：

您可以使用:visible 选择器来查找仅可见的。

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

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

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

我认为你可以用这一行在你的代码中执行相同的操作。

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

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

【讨论】：

隐藏的按钮呢？ $('button:visible') ?

【参考方案2】：

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

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

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

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

【讨论】：

@PSL .someDiv.regular:visible 已经可见，所以 show 不会做任何事情。

$(".someDiv").not(".regular").hide();

【参考方案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();
  
);

【参考方案4】：

您可以为此使用:not() 选择器并在进入.each() 之前过滤结果：

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