JQuery：如果div是可见的

Question

我正在使用JS作为改变我正在创建的SPA内容的一种方式。当我按下按钮更改内容时，HTML会从此更改：

<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.
}

有什么建议吗？

Answer 1

您可以使用.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>