JQuery: si div est visible

Question

Je suis en utilisant JS comme un moyen de changer le contenu d'un SPA je suis en train de créer. Lorsque j'appuie sur un bouton pour modifier le contenu HTML les changements de cette:

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

pour cela:

<div id="selectDiv" style>

Maintenant partie de mon SPA dispose d'un div qui contient un certain nombre de cases, chacune représentant un div, et donc quand j'appuie sur le bouton envoyer, le prochain div qui doit être affiché sera le premier élément de la liste de case à cocher qui a été sélectionné.

Je me demandais si il existe un moyen de JQuery pour le code "près de détecter les" div qui est maintenant visible. quelque chose comme ceci:

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

Toutes les suggestions?

Answer 1

Vous pouvez utiliser .is(':visible')

Sélectionne tous les éléments qui sont visibles.

Par exemple:

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

Aussi, vous pouvez obtenir la div qui est visible par:

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

Live exemple:

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>