如何檢查jQuery中是否隱藏了元素？

1個
2
下一個
由於問題涉及單個元素，因此此代碼可能更合適：
//檢查CSS內容是否顯示：[none | block]，忽略可見性：[true | false]
$（element）.is（“：visible”）;
//與隱藏相同
$（element）.is（“：hidden”）;
它與twernt的建議相同，但適用於單個元素。它與jQuery FAQ中推薦的算法匹配。
我們使用jQuery的is（）來與另一個元素，選擇器或任何jQuery對像一起檢查所選元素。此方法遍歷DOM元素以找到匹配項，該匹配項滿足傳遞的參數。如果存在匹配項，則返回true，否則返回false。
|
您可以使用隱藏的選擇器：
//匹配所有隱藏的元素
$（'element：hidden'）
和可見的選擇器：
//匹配所有可見的元素
$（'element：visible'）
|
if（$（element）.css（'display'）=='none'|| $（element）.css（“ visibility”）==“隱藏”）{
//'element'被隱藏
}
上面的方法沒有考慮父級的可見性。要同時考慮父級，則應使用.is（“：hidden”）或.is（“：visible”）。
例如，

 Div2 

上面的方法將div2可見，而：visible不可見。但是以上內容在許多情況下可能很有用，尤其是當您需要查找隱藏的父級中是否有任何可見的錯誤div時，因為在這種情況下：visible無效。
|
這些答案都沒有解決我所理解的問題，即我正在尋找的問題：“如何處理具有可見性的項目：隱藏？”。 ：visible和：hidden都不會處理這個問題，因為它們都希望根據文檔進行顯示。據我所確定，沒有選擇器可以處理CSS可見性。這是我的解決方法（標準jQuery選擇器，可能會有更簡潔的語法）：
$（“。item”）。each（function（）{
如果（$（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語句，像這樣：
如果（$（'＃btnUpdate'）。is（“：visible”））
{
$（'＃btnUpdate'）。animate（{width：“ toggle”}）; //隱藏按鈕
}
或更有效，但更難看：
var button = $（'＃btnUpdate'）;
如果（button.is（“：visible”））
{
button.animate（{width：“ toggle”}）; //隱藏按鈕
}
您可以在一行中完成所有操作：
$（'＃btnUpdate'）。filter（“：visible”）。animate（{width：“ toggle”}）;
|
：visible選擇器根據jQuery文檔：
它們的CSS顯示值為none。
它們是type =“ hidden”的表單元素。
它們的寬度和高度明確設置為0。
祖先元素被隱藏，因此該元素未顯示在頁面上。
具有可見性：隱藏或不透明：0的元素被視為可見，因為它們仍然佔用佈局中的空間。
這在某些情況下很有用，而在其他情況下則沒有用，因為如果您要檢查元素是否可見（顯示！=無），而忽略父級的可見性，則會發現執行.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隱藏元素，並且不佔用任何空間；
可見性：隱藏隱藏元素，但是它仍然佔用佈局中的空間；
opacity：0將元素隱藏為“ visibility：hidden”，並且仍然佔據佈局中的空間；唯一的區別是不透明度使一個元素可以部分透明。
如果（$（'。target'）。is（'：hidden'））{
$（'。target'）。show（）;
}其他{
$（'。target'）。hide（）;
}
如果（$（'。target'）。is（'：visible'））{
$（'。target'）。hide（）;
}其他{
$（'。target'）。show（）;
}
如果（$（'。target-visibility'）。css（'visibility'）=='隱藏'）{
$（'。target-visibility'）。css（{
可見性：“可見”，
顯示：“”
}）;
}其他{
$（'。target-visibility'）。css（{
可見性：“隱藏”，
顯示：“”
}）;
}
如果（$（'。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）{
如果（（domObj.nodeType！= 1）||（domObj == document.body））{
返回true；
}
if（domObj.currentStyle && domObj.currentStyle [“ display”]！=“ none” && domObj.currentStyle [“ visibility”]！=“ hidden”）{
返回isRendered（domObj.parentNode）;
}否則，如果（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
}）;
}）;