[解決済み】ChromeでjQuery `.is(":visible")` が動作しない。

質問

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/

解決方法は？

どうやらjQueryの :visible セレクタは、Chrome の一部のインライン要素では機能しません。解決策としては、表示スタイルに "block" または "inline-block" を使えば、うまくいくはずです。

また、jQueryは多くの開発者と可視化に関する定義が多少異なっていることに注意してください。

要素がドキュメント内でスペースを消費する場合、可視とみなされます。

可視の要素は、0より大きい幅または高さを持つ。

言い換えれば、ある要素がスペースを消費して可視化されるためには、幅と高さが0でなければなりません。

を持つ要素 visibility: hidden または opacity: 0 は可視とする。 というのも、これらはまだレイアウトのスペースを消費しているからです。

一方、その visibility が設定されています。 hidden であったり、不透明度が0であっても :visible はスペースを消費するため、CSS で非表示が明示されている場合は混乱する可能性があります。

ドキュメント内にない要素は非表示とみなされ、jQueryでは に追加されたときに表示されるかどうかを知る方法はありません。 ドキュメントに適用されるスタイルに依存するからです。

option 要素はすべて、その種類に関係なく非表示とみなされます。 が選択された状態であることを示します。

要素を非表示にするアニメーションの間、その要素は次のように見なされます。 アニメーションの終了まで表示されます。表示するアニメーションの場合 要素が表示されている場合、その要素は開始時に表示されているとみなされます。 アニメーションで使用されます。

簡単に言うと、画面上に要素が見えていれば、たとえ内容が見えなくても、透明であっても、それは可視である、つまりスペースを取っている、ということです。

マークアップを少しきれいにして、表示スタイル( つまり、要素の表示を "block" に設定する等。 ) で、これは私のために動作します。

フィドル

の公式APIリファレンスです。 :visible

jQuery 3 では、以下のように定義されています。 :visible が少し変わりました。

jQuery 3 では、以下の意味が若干変更されています。 :visible (したがって :hidden ).

このバージョンから、要素は次のように見なされます。 :visible は、幅がゼロのものも含めて、レイアウトボックスがあれば および/または高さ。例えば br 要素やインライン要素で のコンテンツが選択されます。 :visible セレクターを使用します。