How to know if a div does not have the Hidden class with jQuery

Question

I want to make a denial in the if,in this case below I want to see the div that has NOT the Hidden class.

I’m trying this way:

function AddFiltro() {
    if ($("#divcamponiver:not(:hidden)")) {
        alert("CAMPOS DO TIPO DATA");
    }

    if ($("#divcampo:not(:hidden)")) {
        alert("CAMPOS PADRAO");
    }
}

But both if are being executed.

Answer 1

You can use the hasClass() for that reason:

if ($("#divcamponiver").hasClass("hidden"))

:hidden This used in the selector is searching for the pseudo-class Hidden and not a class called Hidden. A pseudo-class Hidden is used to identify whether an element is visible or not.

More details here: Pseudo-classes

Now if you want the selector for this pseudo-class, you must do so:

if ($("#divcamponiver").is(":hidden"))

Here an example:

alert("d1 has class= " + $("#d1").hasClass("hidden"))
alert("d1 is:hidden= " + $("#d1").is(":hidden"))


alert("d2 has class= " + $("#d2").hasClass("hidden"))
alert("d2 is:hidden= " + $("#d2").is(":hidden"))

div {
  border: solid 2px #000;
  height: 200px;
  width: 200px;
}

#d1 {
   background-color: yellow;
}

#d2 {
   background-color: cyan;
   display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="d1" class="hidden"></div>
<div id="d2"></div>