jQuery: 如果div可见

Question

我正在使用JS来改变我创建的单页应用程序的内容。当我按下按钮以更改内容时，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.
}

任何建议？

- Mark

---

你能不能不要乱搞.hasClass函数，像这样做呢？检查一个元素是否有特定的类，然后再进行操作？ - Andy Holmes

if(document.getElementById("selectDiv").style.display !== "none"){...} - Scott Marcus

你所谓的“几乎检测”是什么意思？你可以使用 $elem.is(":visible") 来确定元素是否可见！ - Gacci

请查看此链接 - https://dev59.com/SnVC5IYBdhLWcg3wz0l9#72112111 - Sahil Thummar

Answer 1

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

选择所有可见元素。

例如：

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

此外，您可以通过以下方法获取可见的

元素：

$('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>

- Mosh Feu

---

嗨，不是质疑这个答案的正确性，但请考虑为这类问题建议或投票重复。在 Stack Overflow 上已经有一些非常全面的答案，我们可以将这个问题指向那里。 - Serlite

我能像这样做吗？$(document).ready(function () { if ($('#selectDiv').is(':visible')) { //与此div相关的JS代码。 } }); - Mark

是的，请看我的更新。 - Mosh Feu

谢谢，这对我有用。 - Ashiquzzaman

@Md. Ashiquzzaman 很高兴听到这个好消息 :) - Mosh Feu