:visibleS2C Home « Selectors « :visible
Visible element selector.
Shorthand version $(':visible')
Description
The :visible selector, selects all visible elements.
Opposite of the :hidden selector.
- Opposite of the
:hiddenselector. - Being a jQuery extension the
:hiddenpseudo selector is not part of any current CSS specification. Therefore:hiddencannot take advantage of the performance boost provided by the native DOMquerySelectorAll()method. - If this selector is not preceded by another selector, the universal selector ("*") is implied and so the whole DOM will be searched. Use another selector as in the examples below to narrow the search and improve performance.
- The CSS display attribute value is set to
none. - The CSS display attribute value is set to
none. - The CSS height and width attribute values are set to
0. - The element is a <form></form> HTML element with type attribute value set to
hidden. - An ancestor element is hidden, ergo also hiding this element.
- All<option></option> HTML element are considered hidden, regardless of their selected state
- Elements that are not in a document.
An element is considered 'hidden' if any of the following apply:
Syntax
| Signature | Description |
|---|---|
jQuery(':visible') | Visible element match |
Parameters
None.
Return
N/A.
:visible ExampleTop
Select all visible elements.
In the example below an orange background is applied to any visible 'tr' elements in the table below that are clicked on. We display any hidden elements when the button below is clicked. You can still change any visible element to orange but clicking the previously hidden elements has no effect. Try clicking on a table row, then pressing the button below to see the effects.
| Table Row 1, Table Data 1 | Table Row 1, Table Data 2 |
| Table Row 2, Table Data 1 | Table Row 2, Table Data 2 |
| Table Row 3, Table Data 1 | Table Row 3, Table Data 2 |
| Table Row 4, Table Data 1 | Table Row 4, Table Data 2 |
| Table Row 5, Table Data 1 | Table Row 5, Table Data 2 |
| Table Row 6, Table Data 1 | Table Row 6, Table Data 2 |
$(function(){
$('.testtable tr:visible').on('click', function() {
$(this).css('backgroundColor', 'orange');
});
$('#btn1').on('click', function() {
$(".testtable tr:hidden").show();
});
});