2016-11-07 116 views
18

我使用JS作为改变我创建的SPA内容的一种方式。当我按下一个按钮来改变内容从这个HTML变化:JQuery:如果div可见

<div id="selectDiv" style="display: none;"> 

这样:

<div id="selectDiv" style> 

现在我的SPA的部分有一个包含若干个复选框的DIV,每个代表div,所以当我按下提交按钮时,应该显示的下一个div将成为复选框列表中的第一个被选中的项目。

我想知道是否有一种方法在JQuery中的代码“几乎检测”哪些div现在可见。像这样:

if($('#selectDiv').isVisible()){ 
    //JS code associated with this div. 
} 

有什么建议吗?

+0

难道你不会搞乱'.hasClass'函数来做这样的事吗?检查一个元素是否具有某个类,然后从那里去? –

+0

'if(document.getElementById(“selectDiv”)。style.display!==“none”){...}' –

+0

“几乎检测”是什么意思?您可以使用$ elem.is(“:visible”)来确定元素是否可见! – Gacci

回答

28

您可以使用.is(':visible')

选择是可见的所有元素。

例如:

if($('#selectDiv').is(':visible')){ 

此外,您还可以得到DIV其由是可见:

$('div:visible').callYourFunction(); 

活生生的例子:

console.log($('#selectDiv').is(':visible')); 
 
console.log($('#visibleDiv').is(':visible'));
#selectDiv { 
 
    display: none; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="selectDiv"></div> 
 
<div id="visibleDiv"></div>

+1

嘿那里 - 不要质疑这个答案的正确性,但请考虑对这类问题推荐或投票。 Stack Overflow上已经有了一些非常全面的答案,我们可以用这个问题来代替。 – Serlite

+0

我可以做这样的事吗? $(document).ready(function(){if($('#selectDiv')。(':visible')){ //此关联的JS代码 } }); –

+0

是的,看我的更新。 –