jQuery :visible Selector
Last Updated :
17 Nov, 2022
The jQuery :visible Selector is used to select all the elements that are currently visible in the document. The visible element does not support any condition that is given below:
- Set to display:none
- Form elements with type=”hidden”
- Width and height set to 0
- A hidden parent element (this also hides child elements)
Syntax:
$(":visible")
Example 1: In this example, we will select all the visible <p> elements by using jQuery :visible Selector.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
$("p:visible").css(
"background-color", "green");
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
jQuery :visible Selector
</h2>
<p>GeeksForGeeks</p>
<p style="display:none;">
A Computer science portal for Geeks.
</p>
<p>
A computer science portal for geeks.
</p>
<h4>Sudo Placement</h4>
<div>GFG</div>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will change the font color of all the visible <p> elements with the help of click function.
HTML
<!DOCTYPE html>
<html>
<head>
<script src=
</script>
<script>
$(document).ready(function () {
$("button").click(function () {
$("p:visible").css(
"color", "blue");
});
});
</script>
</head>
<body>
<center>
<h1 style="color:green;">
GeeksForGeeks
</h1>
<h2>
jQuery :visible Selector
</h2>
<p>GeeksForGeeks</p>
<p style="display:none;">
A Computer science portal for Geeks.
</p>
<p>
A computer science portal for geeks.
</p>
<button>Change color</button>
<h4>Sudo Placement</h4>
<div>GFG</div>
</center>
</body>
</html>
|
Output:
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...