Jquery selector can find hidden element ( display: none;), how to disable this case?

Question

I have Html code

<div id="demo" style="display:none;">Test demo</div>

and javascript:

$("#demo");

It will be selected, but I want to div with id = "demo", can not be selected because it's hidden.

Thank's

Answer 1

For selecting hidden use $(':hidden#demo')

For selecting Visible use $(':visible#demo')

Answer 2

If I understand correctly and you only want to select #demo if it's not hidden, use $('#demo:visible'). Some helpful resources are https://api.jquery.com/visible-selector/ and https://api.jquery.com/hidden-selector/