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

Question

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>

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

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

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

Answer 1

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

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

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

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

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

另一方面，即使它的 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.

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

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

FIDDLE

Official API reference for :visible

---

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

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