-->

jQuery :visible Selector

By: Bipin C Mathew 4 months, 3 weeks ago

We can simply select all the visible elements on an HTML page using the visible selector. The j Query visible selector considered an element visible if they consume space in the document. That means elements with visibility hidden; or opacity: 0; are considered visible since they still preserve space in the layout. The visible selector is the opposite of the hidden selector. Therefore, not every item selected by visible is selected by :hidden and vice versa. The elements not included in a file are considered to be hidden;

Syntax  $(":visible")

Example

<!doctype html>
	<html lang="en">
	<head>
	  <meta charset="utf-8">
	  <title>visible demo</title>
	  <style>
	  div {
	    width: 50px;
	    height: 40px;
	    margin: 5px;
	    border: 3px outset green;
	    float: left;
	  }
	  .starthidden {
	    display: none;
	  }
	  </style>
	  <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
	</head>
	<body>
	 
	<button>Show hidden to see they don't change</button>
	<div></div>
	<div class="starthidden"></div>
	<div></div>
	<div></div>
	<div style="display:none;"></div>
	 
	<script>
	$( "div:visible" ).click(function() {
	  $( this ).css( "background", "yellow" );
	});
	$( "button" ).click(function() {
	  $( "div:hidden" ).show( "fast" );
	});
	</script>
	 
	</body>
	</html>

Comments

Let us talk!

We take the vision which comes from dreams and apply the magic of science and mathematics, adding the heritage of our profession and our knowledge to create a design.