要素がjQueryで非表示になっているかどうかを確認するにはどうすればよいですか？

1
2
次
質問は単一の要素に言及しているため、このコードの方が適している可能性があります。
// CSSコンテンツの表示をチェックします：[none | block]、可視性を無視します：[true | false]
$（element）.is（ "：visible"）;
//同じことが非表示でも機能します
$（element）.is（ "：hidden"）;
これはtwerntの提案と同じですが、単一の要素に適用されます。また、jQueryFAQで推奨されているアルゴリズムと一致します。
jQueryのis（）を使用して、選択した要素を別の要素、セレクター、または任意のjQueryオブジェクトでチェックします。このメソッドは、DOM要素に沿ってトラバースして、渡されたパラメーターを満たす一致を見つけます。一致する場合はtrueを返し、一致しない場合はfalseを返します。
|
非表示のセレクターを使用できます。
//非表示になっているすべての要素に一致します
$（ 'element：hidden'）
そして目に見えるセレクター：
//表示されているすべての要素に一致します
$（ 'element：visible'）
|
if（$（element）.css（ 'display'）== 'none' || $（element）.css（ "visibility"）== "hidden"）{
// '要素'は非表示です
}
上記の方法では、親の可視性は考慮されていません。親も考慮するには、.is（ "：hidden"）または.is（ "：visible"）を使用する必要があります。
例えば、

 Div2 

上記の方法では、div2は表示されますが、：visibleは表示されません。ただし、上記は多くの場合に役立つ可能性があります。特に、非表示の親にエラーdivが表示されているかどうかを確認する必要がある場合は、このような状況では：visibleが機能しないためです。
|
これらの回答はいずれも、「可視性のあるアイテムを処理するにはどうすればよいですか：非表示」という質問であると私が理解していることには対応していません。 ：visibleも：hiddenも、ドキュメントに従って表示を探しているため、これを処理しません。私が判断できる限り、CSSの可視性を処理するセレクターはありません。これが私がそれを解決した方法です（標準のjQueryセレクター、より凝縮された構文があるかもしれません）：
$（ "。item"）。each（function（）{
if（$（this）.css（ "visibility"）== "hidden"）{
//非表示状態を処理します
} そうしないと {
//可視状態を処理します
}
}）;
|
トグルされた要素の状態を確認するにはどうすればよいですか？
：visibleおよび：hiddenセレクターを使用して、要素が折りたたまれているかどうかを判別できます。
var isVisible = $（ '＃myDiv'）。is（ '：visible'）;
var isHidden = $（ '＃myDiv'）。is（ '：hidden'）;
可視性に基づいて要素を操作しているだけの場合は、セレクター式に：visibleまたは：hiddenを含めることができます。例えば：
$（ '＃myDiv：visible'）。animate（{left： '+ = 200px'}、 'slow'）;
|
多くの場合、何かが表示されているかどうかを確認するときは、すぐに先に進んで、それを使って何か他のことをします。 jQueryチェーンはこれを簡単にします。
したがって、セレクターがあり、表示または非表示の場合にのみアクションを実行する場合は、filter（ "：visible"）またはfilter（ "：hidden"）を使用して、目的のアクションとチェーンすることができます取る。
したがって、ifステートメントの代わりに次のようになります。
if（$（ '＃btnUpdate'）。is（ "：visible"））
{{
$（ '＃btnUpdate'）。animate（{width： "toggle"}）; //ボタンを非表示
}
またはより効率的ですが、さらに醜いです：
var button = $（ '＃btnUpdate'）;
if（button.is（ "：visible"））
{{
button.animate（{width： "toggle"}）; //ボタンを非表示
}
あなたはそれをすべて1行で行うことができます：
$（ '＃btnUpdate'）。filter（ "：visible"）。animate（{width： "toggle"}）;
|
jQueryのドキュメントによると：visibleセレクター：
これらのCSS表示値はnoneです。
これらはtype = "hidden"のフォーム要素です。
それらの幅と高さは明示的に0に設定されます。
祖先要素は非表示になっているため、その要素はページに表示されません。
可視性：非表示または不透明度：0の要素は、レイアウト内のスペースを消費するため、可視であると見なされます。
これは、要素が表示されているかどうかを確認したい場合（display！= none）、親の可視性を無視して、.css（ "display"）== 'noneを実行するとわかるため、場合によっては便利です。 'は高速であるだけでなく、可視性チェックを正しく返します。
表示ではなく可視性を確認する場合は、.css（ "visibility"）== "hidden"を使用する必要があります。
追加のjQueryノートも考慮に入れてください。
：visibleはjQuery拡張機能であり、CSS仕様の一部ではないため、：visibleを使用したクエリでは、ネイティブDOM querySelectorAll（）メソッドによって提供されるパフォーマンスの向上を利用できません。 ：visibleを使用して要素を選択するときに最高のパフォーマンスを実現するには、まず純粋なCSSセレクターを使用して要素を選択し、次に.filter（ "：visible"）を使用します。
また、パフォーマンスが心配な場合は、[今すぐ表示されます...パフォーマンスの表示/非表示（2010-05-04）]を確認してください。また、他の方法を使用して要素を表示および非表示にします。
|
これは私にとってはうまくいき、show（）とhide（）を使用してdivを非表示/表示にします：
if（$（this）.css（ 'display'）== 'none'）{
/ *コードはここにあります* /
} そうしないと {
/ *代替ロジック* /
}
|
要素の可視性とjQueryのしくみ。
要素はdisplay：none、可視性：非表示または不透明度：0。これらの方法の違い：
display：noneは要素を非表示にし、スペースを占有しません。
可視性：hiddenは要素を非表示にしますが、それでもレイアウト内のスペースを占有します。
opacity：0は、要素を「visibility：hidden」として非表示にしますが、それでもレイアウト内のスペースを占有します。唯一の違いは、不透明度によって要素を部分的に透明にすることができることです。
if（$（ '。target'）。is（ '：hidden'））{
$（ '。target'）。show（）;
} そうしないと {
$（ '。target'）。hide（）;
}
if（$（ '。target'）。is（ '：visible'））{
$（ '。target'）。hide（）;
} そうしないと {
$（ '。target'）。show（）;
}
if（$（ '。target-visibility'）。css（ 'visibility'）== 'hidden'）{
$（ '。target-visibility'）。css（{
可視性：「可視」、
表示： ""
}）;
} そうしないと {
$（ '。target-visibility'）。css（{
可視性：「非表示」、
表示： ""
}）;
}
if（$（ '。target-visibility'）。css（ 'opacity'）== "0"）{
$（ '。target-visibility'）。css（{
不透明度： "1"、
表示： ""
}）;
} そうしないと {
$（ '。target-visibility'）。css（{
不透明度： "0"、
表示： ""
}）;
}
便利なjQueryトグルメソッド：
$（ '。click'）。click（function（）{
$（ '。target'）。toggle（）;
}）;
$（ '。click'）。click（function（）{
$（ '。target'）。slideToggle（）;
}）;
$（ '。click'）。click（function（）{
$（ '。target'）。fadeToggle（）;
}）;
|
プレーンJavaScriptを使用してこれを行うこともできます。
関数isRendered（domObj）{
if（（domObj.nodeType！= 1）||（domObj == document.body））{
trueを返します。
}
if（domObj.currentStyle && domObj.currentStyle ["display"]！= "none" && domObj.currentStyle ["visibility"]！= "hidden"）{
isRendered（domObj.parentNode）;を返します。
} else if（window.getComputedStyle）{
var cs = document.defaultView.getComputedStyle（domObj、null）;
if（cs.getPropertyValue（ "display"）！= "none" && cs.getPropertyValue（ "visibility"）！= "hidden"）{
isRendered（domObj.parentNode）;を返します。
}
}
falseを返します。
}
ノート：
どこでも動作します
ネストされた要素に対して機能します
CSSおよびインラインスタイルで機能します
フレームワークは必要ありません
|
CSSクラスを使用します。hide{display：none！important; }。
非表示/表示するには、.addClass（ "hide"）/。removeClass（ "hide"）を呼び出します。可視性を確認するために、.hasClass（ "hide"）を使用します。
.toggle（）または.animate（）メソッドを使用する予定がない場合は、要素をチェック/非表示/表示する簡単で明確な方法です。
|
デモリンク
$（ '＃clickme'）。click（function（）{
$（ '＃book'）。toggle（ 'slow'、function（）{
//アニメーションが完了しました。
alert（$（ '＃book'）。is（ "：visible"））; // <---表示されている場合はTRUE非表示の場合はFalse
}）;
}）;