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

207

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 google-chrome

— サードバシル
ソース

1

できればjsfiddleリンクで？そして、おそらくjquery.latestでそれをチェックしてください。

— xaxxon

マカスパンは表示：なし、または可視性：非表示にすることができますか？

— Artur Keyan

たぶん、jQueryのバグを除外するために、一時的に最新のjQueryバージョンに更新しますか？

— Strelok、2011

1

参照：bugs.jquery.com/ticket/13132 バージョン1.12 / 2.2で修正されるようです！–

— グレンリトル

1

if文の足すに「== true」を追加する必要はありません。次の場合（$（「＃のメイクスパン」）（ある「可視」）。）enougthある

— marcdahan

273

:visibleChromeの一部のインライン要素では、jQueryのセレクターが機能しないようです。解決策は、表示スタイルを追加するようにすることです"block"か"inline-block"、それを動作させるために。

また、jQueryには、多くの開発者が目にするものとは多少異なる定義があることに注意してください。

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

つまり、要素は、スペースを消費して表示されるように、幅と高さがゼロ以外でなければなりません。

visibility: hiddenまたはopacity: 0が付いている要素は、レイアウト内のスペースをまだ消費しているため、可視と見なされます。

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

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

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

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

それを見る簡単な方法は、画面上で要素を見ることができれば、その内容を見ることができなくても、透明であるなど、可視である、つまりスペースを取ることです。

私はあなたのマークアップを少しクリーンアップし、表示スタイルを追加しました（つまり、要素の表示を「ブロック」に設定するなど）。これは私にとってはうまくいきます：

FIDDLE

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

jQuery 3以降、の定義が:visibleわずかに変更されました

jQuery 3は:visible（したがって :hidden）の意味をわずかに変更します。
このバージョン以降、:visible幅や高さがゼロのレイアウトボックスなど、レイアウトボックスがある場合は、要素が考慮されます。たとえば、brコンテンツのない要素とインライン要素は、:visibleセレクターによって選択されます。

— アデネオ
ソース

また、jsFiddleに個々のコンポーネントを貼り付けてみたところ、問題なく動作しました。jsFiddleでエラーを複製してから、リンクを投稿します。おそらくコードの他の何かがこのエラーの原因です

— Saad Bashir

次のリンクで問題を再現しました：jsfiddle.net/WJU2r/3

— Saad Bashir

3

うまくいったおかげで！理由はわかりませんが、＃makespan {display：block;を設定しています。}機能させました。

— Saad Bashir、2011

元のポスターのコメントには、実際のソリューションであるIEが含まれており、スパンをdisplay：blockにしています。愚かなそのスパンはクロムではデフォルトでは見えませんが、何でもです。

— ジェフデイビス

＆nbsp;を追加するだけで十分です。要素が含まれていない場合、要素はChromeに表示されないためです

— 2013

67

コードがChromeで機能しない理由はわかりませんが、いくつかの回避策を使用することをお勧めします。

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

または

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

jQueryがChromeでいくつかの悪い結果をもたらすことが確実な場合は、CSSルールのチェックに依存するだけで済みます。

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

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

— gion_13
ソース

2

次のリンクで問題を再現しました：jsfiddle.net/WJU2r/3

— Saad Bashir

この質問は違いが間にあるものを詳述:hiddenして:not(:visible)。stackoverflow.com/questions/17425543/...

— マーク・庄屋

関数is（ '：visible'）または.is（ '：hidden'）またはis（ '：not（：hidden）'）はパフォーマンスに非常に悪い

— Diogo Cid

9

要素がに設定されている場合、奇妙なケースがあります 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();
});

— アレックス・ラシュコフ
ソース

私はPhantomJSでこの問題を抱えていますが、Chrome 47.0.2526ではこれが機能するようです。参照：jsfiddle.net/k4b925gn/2

— ekkis

8

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

この問題を解決することができた唯一の方法は、

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

— クリスダトロー
ソース

7

jqueryのドキュメントを読んだ場合、何かが表示/非表示と見なされない理由は数多くあります。

CSSの表示値はnoneです。

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

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

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

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

これは、1つの可視要素と1つの非表示要素を持つ小さなjsfiddleの例です。

http://jsfiddle.net/tNjLb/

— xaxxon
ソース

次のリンクで問題を再現しました：jsfiddle.net/WJU2r/3

— Saad Bashir

7

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>

よろしく、

フェルナンド

— フェルナンド
ソース

3

一般に、オブジェクトの親が非表示になっているとき、私はこの状況に住んでいます。たとえば、htmlが次のような場合：

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

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

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

divも表示されないように親が表示されないため、falseを返します。

— cenk ebret
ソース

私の解決策を下に見てください...あなたの子で表示を「継承」に設定すると、その親項目から状態がコピーされます。そのため、それが非表示の場合はelemtn.is（ "：hidden"）が機能します

— patrick

3

要素が表示されているかどうかを判別するためのクロスブラウザー/バージョンソリューションは、表示/非表示の要素に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ドキュメント

— アレックス
ソース

1

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

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

— ホラティウ
ソース

0

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

子アイテムに「display：inherit」を追加することで、これを修正しました。これは私のためにそれを修正します：

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

そしてCSS：

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

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

— パトリック
ソース

0

これは、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表示プロパティだけではありません。また、要素のコンテンツの幅と高さにも依存します。したがって、要素に幅と高さがあることを確認してください。これを行うには、表示プロパティを"inline-block"またはに設定する必要がある場合があります"block"

— hkulur
ソース

0

可視性はイベントを取得しますが、ディスプレイはイベントを取得しないため、visibility：hidden insted of display：noneを使用する必要があります。

私もです .attr('visibility') === "visible"

— ミチャヘス
ソース