题 如何检查jQuery中是否隐藏了一个元素?


可以使用这些功能切换元素的可见性 .hide().show() 要么 .toggle()

如何测试元素是可见还是隐藏?


6705
2017-10-07 13:03


起源


值得一提的是(即使在这一段时间之后) $(element).is(":visible") 适用于jQuery 1.4.4,但不适用于jQuery 1.3.2 互联网 &浏览器NBSP; 8。这可以使用 Tsvetomir Tsonev的有用测试片段。只记得改变jQuery的版本,在每个版本下进行测试。 - Reuben
这与一个不同的问题有关: stackoverflow.com/questions/17425543/... - Mark Schultheiss
你对隐藏的定义是什么? - fabspro


答案:


由于问题涉及单个元素,因此该代码可能更合适:

// Checks css for display:[none|block], ignores visibility:[true|false]
$(element).is(":visible"); 

// The same works with hidden
$(element).is(":hidden"); 

与...一样 twernt的建议,但适用于单个元素;而且它 匹配jQuery FAQ中推荐的算法


8294
2017-10-07 13:30



这个解决方案似乎会鼓励人们的困扰 visible=false 和 display:none;而莫特的解决方案明显地影响了打算检查的编码员 display:none; (通过提及隐藏和显示哪个控件 display:none 不 visible=true) - kralco626
这是正确的,但是 :visible 还将检查父元素是否可见,正如chiborg指出的那样。 - Tsvetomir Tsonev
你有一点 - 我会明确表示代码只检查 display 属性。鉴于最初的问题是为了 show() 和 hide(),他们定了 display,我的回答是正确的。顺便说一句它与IE7一起工作,这是一个测试片段 - jsfiddle.net/MWZss ; - Tsvetomir Tsonev
我实际上发现反向逻辑词更好:!$('selector')。is(':hidden');因为某些原因。值得一试。 - Kzqai
这是针对regexp的简单基准测试():jsperf.com/jquery-is-vs-regexp-for-css-visibility。结论:如果你想要表现,请使用regexp over is()(因为is()在查看实际元素之前首先查找所有隐藏节点)。 - Max Leske


你可以使用 hidden 选择:

// Matches all elements that are hidden
$('element:hidden')

而且 visible 选择:

// Matches all elements that are visible
$('element:visible')

1264
2017-10-07 13:16



请注意,此演示文稿中有一些与性能相关的提示: addyosmani.com/jqprovenperformance - codecraig
在第21页到第28页,它显示了缓慢:隐藏或:可见与其他选择器的比较。谢谢你的指点。 - Etienne Dupuis
当你处理几个元素并且很少发生时 - 即案件的绝对绝对多数 - 时间问题是一个荒谬的小问题。哦,不!花了42毫秒而不是19毫秒! - vbullinger
我正在使用这个选择器来切换元素。 $('element:hidden')对我来说总是如此! - ZoomIn
@cwingrav您可能想要重新阅读文档,:hidden适用于所有元素。表单元素 type="hidden" 只是一个可以触发的案例:隐藏。元素没有高度和宽度,元素与 display: none,具有隐藏祖先的元素也将符合:隐藏。 - Joshua Walsh


if ( $(element).css('display') == 'none' || $(element).css("visibility") == "hidden"){
    // element is hidden
}

上述方法不考虑父级的可见性。要考虑父母,你应该使用 .is(":hidden") 要么 .is(":visible")

例如,

<div id="div1" style="display:none">
  <div id="div2" style="display:block">Div2</div>
</div>

以上方法将考虑 div2 可见而 :visible 不。但上述情况在许多情况下可能会有用,特别是当您需要查找隐藏父级中是否有任何错误div时,因为在这种情况下 :visible 不管用。


784
2017-10-07 13:09



这仅检查单个元素的显示属性。 :visible属性还检查父元素的可见性。 - chiborg
这是使用IE 8进行测试时唯一有效的解决方案。 - evanmcd
这不是我的问题的解决方案,但该方法帮助我确定了针对我的问题检查属性的修复。 - dchayka
@chiborg是的,但有时这就是你想要的东西,我必须学习“聪明”的jQuery是多么的艰难... - Casey
这确实回答了问题,问题是关于单个元素并使用 hide(), show() 和 toggle() 但是,正如大多数人已经说过的那样,我们应该使用 :visible 和 :hidden 伪类。 - Jimmy Knoot


这些答案都没有解决我所理解的问题,这正是我所寻找的, “我如何处理有物品的物品 visibility: hidden?”。也不 :visible 也不 :hidden 将处理这个,因为他们都在寻找文档显示。据我所知,没有选择器来处理CSS可见性。以下是我如何解决它(标准的jQuery选择器,可能有更简洁的语法):

$(".item").each(function() {
    if ($(this).css("visibility") == "hidden") {
        // handle non visible state
    } else {
        // handle visible state
    }
});

451
2018-03-24 18:44



这个答案很好处理 visibility 从字面上看,问题是 How you would test if an element has been hidden or shown using jQuery?。使用jQuery意味着: display 属性。 - MarioDS
元素与 visibility: hidden 要么 opacity: 0 被认为是可见的,因为它们仍然占用布局中的空间。看到 回答 佩德罗·雷尼奥 和 jQuery文档 在...上 :visible 选择。 - awe
你需要遍历DOM来检查节点的父节点,否则,这是没用的。 - vsync
如果用.hide()隐藏元素,这将不起作用。 - user3197818


如何确定切换元素的状态?


您可以使用以下命令确定元素是否已折叠 :visible 和 :hidden 选择。

var isVisible = $('#myDiv').is(':visible');
var isHidden = $('#myDiv').is(':hidden');

如果您只是根据其可见性对元素进行操作,则可以包括 :visible 要么 :hidden 在选择器表达式中。例如:

 $('#myDiv:visible').animate({left: '+=200px'}, 'slow');

322
2018-01-13 21:13



想知道为什么没有答案提到元素从可见窗口移开的情况,比如 top:-1000px......猜猜这是一个边缘案例 - jazzcat


通常在检查某些东西是否可见时,您将立即前进并使用它做其他事情。 jQuery链接使这很容易。

因此,如果您有一个选择器,并且只想在可见或隐藏时对其执行某些操作,则可以使用 filter(":visible") 要么 filter(":hidden") 然后用你想要的动作将它链接起来。

所以而不是一个 if 声明,像这样:

if ($('#btnUpdate').is(":visible"))
{
     $('#btnUpdate').animate({ width: "toggle" });   // Hide button
}

或更高效,但更丑陋:

var button = $('#btnUpdate');
if (button.is(":visible"))
{
     button.animate({ width: "toggle" });   // Hide button
}

您可以在一行中完成所有操作:

$('#btnUpdate').filter(":visible").animate({ width: "toggle" });

236
2017-07-25 10:21



没有理由在示例中使用的代码段中提取DOM节点,然后必须再次查找它。最好只做:var $ button = $('#btnUpdate');然后在If表达式中只使用$按钮而不是$(按钮)。具有缓存jQuery对象的优点。 - LocalPCGuy
这是一个简单的例子 jquerypot.com/... - Ketan Savaliya


:visible 选择器根据 jQuery文档

  • 他们有一个CSS display 的价值 none
  • 它们是表单元素 type="hidden"
  • 它们的宽度和高度显式设置为0。
  • 隐藏了一个祖先元素,因此该元素不会显示在页面上。

元素与 visibility: hidden 要么 opacity: 0 被认为是可见的,因为它们仍然占用布局中的空间。

这在某些情况下很有用,而在其他情况下则无用,因为如果要检查元素是否可见(display != none),忽略了父母的知名度,你会发现那样做 .css("display") == 'none' 不仅更快,而且还将正确返回可见性检查。

如果要检查可见性而不是显示,则应使用: .css("visibility") == "hidden"

还要考虑到 额外的jQuery笔记

因为 :visible 是一个jQuery扩展,不是CSS规范的一部分,查询使用 :visible 无法利用本机DOM提供的性能提升 querySelectorAll() 方法。使用时达到最佳性能 :visible 要选择元素,首先使用纯CSS选择器选择元素,然后使用 .filter(":visible")

此外,如果您担心性能,您应该检查 现在你看到我......显示/隐藏表现 (2010-05-04)。并使用其他方法来显示和隐藏元素。


188
2017-11-25 09:16





这适用于我,我正在使用 show() 和 hide() 使我的div隐藏/可见:

if( $(this).css('display') == 'none' ){
    /* your code goes here */
} else {
    /* alternate logic   */
}

170
2017-07-06 20:19





怎么样 元素可见性和jQuery工作;

可以隐藏元素 display:nonevisibility:hidden 要么 opacity:0。这些方法之间的区别:

  • display:none 隐藏元素,它不占用任何空间;
  • visibility:hidden 隐藏元素,但它仍占用布局中的空间;
  • opacity:0 将元素隐藏为“visibility:hidden”,它仍占用布局中的空间;唯一的区别是不透明度让一个元素部分透明;

    if ($('.target').is(':hidden')) {
      $('.target').show();
    } else {
      $('.target').hide();
    }
    if ($('.target').is(':visible')) {
      $('.target').hide();
    } else {
      $('.target').show();
    }
    
    if ($('.target-visibility').css('visibility') == 'hidden') {
      $('.target-visibility').css({
        visibility: "visible",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        visibility: "hidden",
        display: ""
      });
    }
    
    if ($('.target-visibility').css('opacity') == "0") {
      $('.target-visibility').css({
        opacity: "1",
        display: ""
      });
    } else {
      $('.target-visibility').css({
        opacity: "0",
        display: ""
      });
    }
    

    有用的jQuery切换方法: 

    $('.click').click(function() {
      $('.target').toggle();
    });
    
    $('.click').click(function() {
      $('.target').slideToggle();
    });
    
    $('.click').click(function() {
      $('.target').fadeToggle();
    });
    

166
2018-04-24 21:04



另一个区别 visibility:hidden 和 opacity:0 是元素仍然会响应事件(如点击) opacity:0。我学会了为文件上传制作自定义按钮的技巧。 - urraka
此外,如果您使用不透明度隐藏输入:0,仍然会使用Tab键选择它 - YangombiUmpakati