jQuery `.is(":visible")` 在 Chrome 中不起作用

jQuery `.is(":visible")` not working in Chrome

提问by Saad Bashir

if ($("#makespan").is(":visible") == true) { 
    var make = $("#make").val(); 
}
else {
    var make = $("#othermake").val(); 
}

Make:<span id=makespan><select id=make></select><span id=othermakebutton class=txtbutton>Other?</span></span><span id=othermakespan style="display: none;"><input type=text name=othermake id=othermake>&nbsp;-&nbsp;<span id=othermakecancel class=txtbutton>Cancel</span></span>

The above code runs smooth in Firefox, but doesn't seem to work in Chrome. In Chrome it shows .is(":visible") = falseeven when it is true.

上面的代码在 Firefox 中运行流畅，但在 Chrome 中似乎不起作用。在 Chrome 中，.is(":visible") = false即使是true.

I am using following jQuery version: jquery-1.4.3.min.js

我正在使用以下 jQuery 版本：jquery-1.4.3.min.js

jsFiddle Link: http://jsfiddle.net/WJU2r/4/

jsFiddle 链接：http: //jsfiddle.net/WJU2r/4/

回答by adeneo

It seems jQuery's :visibleselector does not work for some inline elements in Chrome. The solution is to add a display style, like "block"or "inline-block"to make it work.

似乎 jQuery 的:visible选择器不适用于 Chrome 中的某些内联元素。解决方案是添加显示样式，例如"block"或"inline-block"使其工作。

Also note that jQuery has a somewhat different definition of what is visible than many developers:

另请注意，jQuery 对可见内容的定义与许多开发人员略有不同：

Elements are considered visible if they consume space in the document.
Visible elements have a width or height that is greater than zero.

如果元素占用文档中的空间，则元素被认为是可见的。
可见元素的宽度或高度大于零。

In other words, an element must have a non-zero width and height to consume space and be visible.

换句话说，元素必须具有非零的宽度和高度才能占用空间并可见。

Elements with visibility: hiddenor opacity: 0are considered visible, since they still consume space in the layout.

带有visibility: hidden或 的元素opacity: 0被认为是可见的，因为它们仍然占用布局中的空间。

On the other hand, even if its visibilityis set to hiddenor the opacity is zero, it's still :visibleto jQuery as it consumes space, which can be confusing when the CSS explicitly says its visibility is hidden.

另一方面，即使它visibility被设置为hidden或不透明度为零，它仍然:visible是 jQuery，因为它消耗空间，当 CSS 明确表示它的可见性是隐藏的时，这可能会令人困惑。

Elements that are not in a document are considered hidden; jQuery does not have a way to know if they will be visible when appended to a document since it depends on the applicable styles.

All option elements are considered hidden, regardless of their selected state.

During animations that hide an element, the element is considered visible until the end of the animation. During animations to show an element, the element is considered visible at the start at the animation.

不在文档中的元素被认为是隐藏的；jQuery 无法知道它们在附加到文档时是否可见，因为它取决于适用的样式。

所有选项元素都被认为是隐藏的，无论它们的选择状态如何。

在隐藏元素的动画期间，该元素被视为可见，直到动画结束。在显示元素的动画期间，该元素在动画开始时被认为是可见的。

The easy way to look at it, is that if you can see the element on the screen, even if you can't see its content, it's transparent etc., it's visible, i.e. it takes up space.

查看它的简单方法是，如果您可以在屏幕上看到元素，即使您看不到它的内容，它是透明的等等，它是可见的，即它占用空间。

I cleaned up your markup a little and added a display style (i.e. setting the elements display to "block" etc), and this works for me:

我稍微清理了您的标记并添加了显示样式（即将元素显示设置为“块”等），这对我有用：

FIDDLE

小提琴

Official API reference for :visible

官方 API 参考 :visible

---

---

As of jQuery 3, the definition of :visiblehas changed slightly

从 jQuery 3 开始， 的定义:visible略有变化

jQuery 3 slightly modifies the meaning of :visible(and therefore of :hidden).
Starting with this version, elements will be considered :visibleif they have any layout boxes, including those of zero width and/or height. For example, brelements and inline elements with no content will be selected by the :visibleselector.

jQuery 3 稍微修改了:visible(以及因此 :hidden)的含义。
从这个版本开始，:visible如果元素有任何布局框，包括零宽度和/或高度的那些，将被考虑 。例如，br没有内容的元素和内联元素将被选择:visible器选中。

回答by gion_13

I don't know why your code doesn't work on chrome, but I suggest you use some workarounds :

我不知道为什么您的代码在 chrome 上不起作用，但我建议您使用一些解决方法：

$el.is(':visible') === $el.is(':not(:hidden)');

or

或者

$el.is(':visible') === !$el.is(':hidden');  

If you are certain that jQuery gives you some bad results in chrome, you can just rely on the css rule checking :

如果您确定 jQuery 在 chrome 中给您带来了一些不好的结果，您可以依靠 css 规则检查：

if($el.css('display') !== 'none') {
    // i'm visible
}

Plus, you might want to use the latest jQuerybecause it might have bugs from older version fixed.

另外，您可能想要使用最新的 jQuery，因为它可能修复了旧版本的错误。

回答by Alex Rashkov

There is a weird case where if the element is set to display: inlinethe jQuery check for visibility fails.

有一种奇怪的情况，如果元素设置为display: inlinejQuery 检查可见性失败。

Example:

例子：

CSS

CSS

#myspan {display: inline;}

jQuery

jQuery

$('#myspan').show(); // Our element is `inline` instead of `block`
$('#myspan').is(":visible"); // This is false

To fix it you can hide the element in jQuery and than show/hideor toggle()should work fine.

要修复它，您可以在 jQuery 中隐藏元素，然后show/hide或toggle()应该可以正常工作。

$('#myspan').hide()
$('#otherElement').on('click', function() {
    $('#myspan').toggle();
});

回答by Chris Dutrow

I assume it has something to do with a quirk in our HTML because other places on the same page work just fine.

我认为这与我们 HTML 中的一个怪癖有关，因为同一页面上的其他地方工作得很好。

The only way I was able to solve this problem was to do:

我能够解决这个问题的唯一方法是：

if($('#element_id').css('display') == 'none')
{
   // Take element is hidden action
}
else
{
   // Take element is visible action
}

回答by xaxxon

If you read the jquery docs, there are numerous reasons for something to not be considered visible/hidden:

如果您阅读了 jquery 文档，则有很多原因会导致某些内容不被视为可见/隐藏：

They have a CSS display value of none.

它们的 CSS 显示值为 none。

They are form elements with type="hidden".

它们是 type="hidden" 的表单元素。

Their width and height are explicitly set to 0.

它们的宽度和高度明确设置为 0。

An ancestor element is hidden, so the element is not shown on the page.

祖先元素被隐藏，因此该元素不会显示在页面上。

http://api.jquery.com/visible-selector/

http://api.jquery.com/visible-selector/

Here's a small jsfiddle example with one visible and one hidden element:

这是一个带有一个可见元素和一个隐藏元素的小 jsfiddle 示例：

http://jsfiddle.net/tNjLb/

http://jsfiddle.net/tNjLb/

回答by Fernando

Internet Explorer, Chrome, Firefox...

浏览器、Chrome、火狐...

Cross Browser function "isVisible()"

跨浏览器函数“isVisible()”

//check if exist and is visible
function isVisible(id) {
    var element = $('#' + id);
    if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
        return true;
    } else {
        return false;
    }
}

Full example:

完整示例：

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
        <script type="text/javascript">
            //check if exist and is visible
            function isVisible(id) {
                var element = $('#' + id);
                if (element.length > 0 && element.css('visibility') !== 'hidden' && element.css('display') !== 'none') {
                    return true;
                } else {
                    return false;
                }
            }

            function check(id) {
                if (isVisible(id)) {
                    alert('visible: true');
                } else {
                    alert('visible: false');
                }
                return false;
            }
        </script>

        <style type="text/css">
            #fullname{
                display: none;
            }
            #vote{
                visibility: hidden;
            }
        </style>
        <title>Full example: isVisible function</title>
    </head>
    <body>
        <div id="hello-world">
            Hello World!
        </div>
        <div id="fullname">
            Fernando Mosquera Catarecha
        </div>
        <div id="vote">
            rate it!
        </div>
        <a href="#" onclick="check('hello-world');">Check isVisible('hello-world')</a><br /><br />
        <a href="#" onclick="check('fullname');">Check isVisible('fullname')</a><br /><br />
        <a href="#" onclick="check('vote');">Check isVisible('vote')</a>
    </body>
</html>

Regards,

问候，

Fernando

费尔南多

回答by cenk ebret

Generally i live this situation when parent of my object is hidden. for example when the html is like this:

通常，当我的对象的父项被隐藏时，我会遇到这种情况。例如当 html 是这样的：

    <div class="div-parent" style="display:none">
        <div class="div-child" style="display:block">
        </div>
    </div>

if you ask if child is visible like:

如果您询问孩子是否可见，例如：

    $(".div-child").is(":visible");

it will return false because its parent is not visible so that div wont be visible, also.

它将返回 false，因为它的父级不可见，因此 div 也不可见。

回答by Alex

A cross browser/version solution to determine whether an element is visible, is to add/remove a css class to the element on show/hide. The default(visible) state of the element could be for example like this:

确定元素是否可见的跨浏览器/版本解决方案是在显示/隐藏时向元素添加/删除 css 类。元素的默认（可见）状态可以是这样的：

<span id="span1" class="visible">Span text</span>

<span id="span1" class="visible">Span text</span>

Then on hide, remove the class:

然后在隐藏时，删除类：

$("#span1").removeClass("visible").hide();

$("#span1").removeClass("visible").hide();

On show, add it again:

在显示中，再次添加：

$("#span1").addClass("visible").show();

$("#span1").addClass("visible").show();

Then to determine whether the element is visible, use this:

然后要确定元素是否可见，请使用：

if ($("#span1").hasClass("visible")) { // do something }

if ($("#span1").hasClass("visible")) { // do something }

This also solves the performance implications, which may occur on heavy usage of the ":visible" selector, which are pointed in jQuery's documentation:

这也解决了性能影响，这可能在大量使用 ":visible" 选择器时发生，jQuery 的文档中指出：

Using this selector heavily can have performance implications, as it may force the browser to re-render the page before it can determine visibility. Tracking the visibility of elements via other methods, using a class for example, can provide better performance.

大量使用此选择器可能会对性能产生影响，因为它可能会强制浏览器在确定可见性之前重新呈现页面。通过其他方法（例如使用类）跟踪元素的可见性可以提供更好的性能。

Official jQuery API Documentation for ":visible" selector

":visible" 选择器的官方 jQuery API 文档

回答by Horatiu

I added next style on the parent and .is(":visible") worked.

我在父项上添加了下一个样式，并且 .is(":visible") 起作用了。

display: inline-block;

显示：内联块；

回答by patrick

If an item is child of an item that is hidden is(":visible") will return true, which is incorrect.

如果某项是隐藏项的子项，则 is(":visible") 将返回 true，这是不正确的。

I just fixed this by added "display:inherit" to the child item. This will fixed it for me:

我只是通过向子项添加“显示：继承”来解决此问题。这将为我修复它：

<div class="parent">
   <div class="child">
   </div>
<div>

and the CSS:

和 CSS：

.parent{
   display: hidden;
}
.child{
   display: inherit;
}

Now the item can be effectively switched on and off by changing the visibility of the parent, and $(element).is(":visible") will return the visibility of the parent item

现在可以通过更改父项的可见性来有效地打开和关闭该项，并且 $(element).is(":visible") 将返回父项的可见性