In jQuery, the :visible selector selects each elements which is currently visible or check whether element is visible or not.
Basically, elements are considered visible when they consume space in a document. So, visible elements have a width or height greater than zero.
Elements with “visibility: hidden” or “opacity: 0” are considered as visible, because they consume space in the document layout.
According to the jQuery documentation, the :visible selector means:
Read Also: jQuery :visible – Check for hidden elements in jQuery
$(":visible")
For example, you have the following HTML:
<p id="myDiv1" style="display:none;">Div 1</p> <p id="myDiv2" style="visiblility:hidden;">Div 2</p>
So, you can check with:
console.log($('#myDiv1').is(':visible')); // Returns false
console.log($('#myDiv2').is(':visible')); // Returns true
or,
if($('#testElement').is(':visible')) { // Code }
Alternatively, you can select visible element by:
$( "div:visible" ).css( "background", "red" );
:visible has had a reputation for being quite a slow selector as it has to traverse up the DOM tree inspecting a bunch of elements.
Based on United States, Jacob Frazier is a skilled JavaScript developer with over 8 years of experience. He is passionate about change and trying new things, both professionally and personally. He loves startups and is extremely proactive.
Hormonal balance plays a pivotal role in overall well-being, influencing various aspects of health, from…
Dog walking is an excellent way to maintain your furry friend's camaraderie and provides many…
Introduction Businesses understand the diverse requirements of mobile applications, which provide a competitive advantage. There…
The Internet of Things (IoT) has recently changed the world. It links gadgets together and…
NFTs, or Non-Fungible Tokens, are revolutionizing the digital economy. These unique digital assets, authenticated through…
It is safe to say that if you are in need of a good laptop…