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

IT技术 javascript jquery toggle show-hide
2021-02-23 00:41:39

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

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

4个回答

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

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

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

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

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

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

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

隐藏的按钮呢？$('button:visible') ?
2021-05-08 00:41:39

您可以使用: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 不做任何事情。
2021-04-30 00:41:39
$(".someDiv").not(".regular").hide();
2021-05-02 00:41:39

您可以通过两种方式执行此操作：您可以为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();
  }
});

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

$(".someDiv:not(:hidden)").each(function(){
其它你可能感兴趣的问题
上一篇jquery 选择选项单击处理程序 下一篇哪个逻辑运算符优先