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...