The jQuery :visible selector selects all the visible elements by not considering the below conditions..
- The element which are set to a CSS property
display:none. - Hidden fields inside a form using
type="hidden". - The width and height of the element are zero(0).
- Elements whose parents are hidden also hiding the child element as well.
You can use the selector at the time when you want to select of find only the visible elements. Visible elements are taking some space on the webpage.
Syntax of jQuery :visible Selector
See the syntax of jQuery :visible selector below.
The selector require no arguments to pass to use it. For the specific element to select, you have to use the element name, its class or id, at the start of the keyword visible.
Let’s check the examples given below to make it more clear.
How jQuery :visible Selector Select All Visible Elements
If you want to select only the visible elements of the list which is not set to the CSS property display:none. See the below example which color the text of only the visible list items. It uses the click event of jQuery to apply the effect on button click.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<script> $(document).ready(function(){ $('.mybtn').click(function(){ $( ".myvisiul li:visible" ).css("color", "red"); }); }); </script> <style> .myphide{ display:none; } </style> <p><button type="button" class="mybtn">Click to Select Visible Element</button></p> <ul class="myvisiul"> <li>Table</li> <li class="myphide">Chair</li> <li>Dining Table</li> <li class="myphide">Comfortable Chair</li> </ul> |
Output
- Table
- Chair
- Dining Table
- Comfortable Chair
The above example contains the list of items and the button element. You have to just click the button to highlight the visible list items. It applies the ‘red’ color to the text of visible list items. There are two list items which are in hidden state and not taking any space in the example above.
Find Value of All Visible Elements in a Form
A form element can contains many hidden fields to get data from users. The form given below contains four input fields with two input field are using the type="hidden". We cannot say these two hidden input fields as visible.
The example checks all the input fields and displays the values in the alert box for the visible items.
Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<script> $(document).ready(function(){ $('.myformbtn').click(function(){ $( ".myformtag input:visible" ).each(function(){ var y = $(this).val(); alert(y); }); }); }); </script> <style> .myformdiv{ border:1px solid #ccc; padding: 10px; margin:10px 0; max-width: 275px; background: #efefef; } </style> <p><button type="button" class="myformbtn">Click to Find Value of Hidden Element</button></p> <div class="myformdiv"> <form class="myformtag"> <input type="text" placeholder="Enter your name..." value="Your Name"><br> <input type="text" placeholder="Enter your email..." value="Enter Your Email"><br> <button type="button">Submit</button> <input type="hidden" placeholder="myurl" value="url"> <input type="hidden" placeholder="mytrackform" value="loginform"> </form> </div> |
Output
To get the values of the visible input fields in the alert box, just click the button given above. It displays the alert box for two times as there are only two visible input fields in the form.