web-dev-qa-db-ja.com

jQuery `.is（"：visible "）`がChromeで機能しない

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では、trueであっても.is(":visible") = falseと表示されます。

私は次のjQueryバージョンを使用しています：jquery-1.4.3.min.js

jsFiddleリンク： http://jsfiddle.net/WJU2r/4/ /

jquerygoogle-chrome
196
Saad Bashir

JQueryの:visibleセレクタはChromeの一部のインライン要素では機能しないようです。解決策は、"block"や"inline-block"のように表示スタイルを追加して機能させることです。

また、jQueryには、目に見えるものの定義が、他の多くの開発者とは多少異なることがあります。

ドキュメント内のスペースを消費する場合、要素は表示されていると見なされます。
表示されている要素の幅または高さがゼロより大きいです。

言い換えれば、スペースを消費して見えるようにするには、要素は0以外の幅と高さを持たなければなりません。

visibility: hiddenまたはopacity: 0を持つ要素は、レイアウト内のスペースを消費するため、表示されていると見なされます。

一方、visibilityがhiddenに設定されていたり、不透明度がゼロであっても、スペースを消費するのでjQueryにはまだ:visibleがあり、CSSが明示的に非表示にしていると混乱する可能性があります。

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

選択された状態に関係なく、すべてのオプション要素は非表示と見なされます。

要素を非表示にするアニメーションの間、その要素はアニメーションの終わりまで表示されていると見なされます。要素を表示するアニメーションの間、その要素はアニメーションの開始時に表示されていると見なされます。

それを見る簡単な方法は、あなたがその内容を見ることができなくても、あなたがスクリーン上でその要素を見ることができるならば、それは見えます、それは目に見える、すなわちそれはスペースをとります。

私はあなたのマークアップを少し片付けて表示スタイル（ すなわち要素の表示を "block"などに設定する ）を追加しました、そしてこれは私のために働きます：

_フィドル_

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

JQuery 3以降、:visibleの定義は少し変更されました

jQuery 3では、:visibleの（したがって:hiddenの）意味が少し変更されています。
このバージョンから始めて、幅や高さがゼロのものも含め、レイアウトボックスがある場合、その要素は:visibleと見なされます。たとえば、br要素と内容のないインライン要素は、:visibleセレクタによって選択されます。

265
adeneo

なぜあなたのコードがchrome上で動かないのかはわかりませんが、いくつかの回避策をとることをお勧めします。

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

または

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

もしあなたがjQueryがあなたにクロムで悪い結果をもたらすと確信しているなら、あなたはただCSSルールチェックに頼ることができます：

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

さらに、 最新のjQuery を使用することをお勧めします。古いバージョンのバグが修正されている可能性があるためです。

60
gion_13

同じページの他の場所でも問題なく動作するため、HTMLの癖と関係があると思います。

私がこの問題を解決することができた唯一の方法はそうすることでした：

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

要素がdisplay: inlineに設定されている場合、jQueryの可視性チェックが失敗するという奇妙なケースがあります。

例：

_ css _ 

#myspan {display: inline;}

jQuery 

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

これを修正するには、jQueryで要素を非表示にし、show/hideまたはtoggle()よりうまく動作するようにします。

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

Internet Explorer、Chrome、Firefox ...

クロスブラウザ機能「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;
    }
}

完全な例：

<!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>

よろしく、

フェルナンド

7
Fernando

あなたがjqueryのドキュメントを読んだ場合、何かが見えたり隠されたりしないと考えるのには多くの理由があります。

それらはnoneのCSS表示値を持ちます。

これらはtype = "hidden"のフォーム要素です。

幅と高さは明示的に0に設定されています。

先祖要素は非表示になっているため、その要素はページに表示されません。

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

これは、1つのvisible要素と1つのhidden要素を持つ小さなjsfiddleの例です。

http://jsfiddle.net/tNjLb/ /

7
xaxxon

要素が表示されているかどうかを判断するためのクロスブラウザ/バージョンソリューションは、show/hideで要素にCSSクラスを追加/削除することです。要素のデフォルト（可視）状態は、たとえば次のようになります。

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

次に非表示にして、クラスを削除します。

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

ショーで、もう一度それを追加します：

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

それから要素が可視かどうかを判断するために、これを使います：

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

これはまた、jQueryのドキュメントで指摘されている "：visible"セレクタの使用頻度が高い場合に発生する可能性があるパフォーマンスへの影響も解決します。

このセレクタを頻繁に使用すると、ブラウザが可視性を決定する前にページを再レンダリングすることを強制する可能性があるため、パフォーマンスに影響する可能性があります。たとえばクラスを使用して、他の方法で要素の可視性を追跡すると、パフォーマンスが向上します。

"：visible"セレクタの公式jQuery APIドキュメント

3
Alex

私のオブジェクトの親が隠されているとき、一般的に私はこの状況を生きます。たとえば、HTMLが次のようになっているとします。

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

次のように子供が見えるかどうかを尋ねると：

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

その親は表示されず、divも表示されないため、falseが返されます。

3
cenk ebret

私は親に次のスタイルを追加し、.is（ "：visible"）が動作しました。

表示：インラインブロック。

1
Horatiu

visibility はイベントを受け取りますが、 display は受け取りませんので、display：noneの代わりにvisibility：hiddenを使用する必要があります。

だから私は.attr('visibility') === "visible"を行います

0
mitjajez

これは、is（ "：visible"）が呼び出されたときに実行されるjquery.jsのコードです。

if (jQuery.expr && jQuery.expr.filters){

    jQuery.expr.filters.hidden = function( elem ) {
        return ( elem.offsetWidth === 0 && elem.offsetHeight === 0 ) || (!jQuery.support.reliableHiddenOffsets && ((elem.style && elem.style.display) || jQuery.css( elem, "display" )) === "none");
    };

    jQuery.expr.filters.visible = function( elem ) {
        return !jQuery.expr.filters.hidden( elem );
    };
}

ご覧のとおり、CSSのdisplayプロパティだけではありません。要素の内容の幅と高さによっても異なります。そのため、要素に幅と高さがあることを確認してください。これを行うには、displayプロパティを"inline-block"または"block"に設定する必要があります。

0
hkulur

アイテムが隠されているアイテムの子である場合、is（ "：visible"）はtrueを返しますが、これは正しくありません。

子項目に "display：inherit"を追加することでこれを直しました。これは私のためにそれを修正します：

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

そしてCSS：

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

親の可視性を変更することで、アイテムを効果的にオン/オフに切り替えることができ、$（element）.is（ "：visible"）は親アイテムの可視性を返します

0
patrick