From jQuery JavaScript Library
« Back to Selectors
:visible
Matches all elements that are visible.
How :visible is calculated was changed in jQuery 1.3.2. Element assumed as visible if it and its parents consumes space in document. CSS visibility isn't taken into account. The
release notes outline the changes in more detail.
Examples:| Name | Type |
|---|
Make all visible divs turn yellow on click.
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
$("div:visible").click(function () {
$(this).css("background", "yellow");
});
$("button").click(function () {
$("div:hidden").show("fast");
});
});
</script>
<style>
div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }
.starthidden { display:none; }
</style>
</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>
</body>
</html>
