:Visible Selector in jQuery
jQuery’s :visible selector is a useful tool for locating and choosing components that are presently visible on a page. Filtering items according to their displayed state is made easy with our custom jQuery extension to the conventional CSS selectors. It basically lets you focus on the elements that are occupying space in the page layout. As the opposite of the :hidden selector, the :visible selector makes an element visible if it is not regarded as hidden.
Syntax:
The :visible selector can be used with the following basic syntax:
$(selector:visible)In this syntax:
- The alias for jQuery is $. CSS selectors can be class, ID, tag name, or a combination.
- ThisThe visible pseudo-class filters the selection to visible items.
For instance:
- To pick every paragraph (<p>) that is visible in the document, use $(‘p:visible’).
- The element with the ID “myId” is chosen if it is visible via $(‘#myId:visible’).
- All visible components with the class “myClass” are selected by $(‘.myClass:visible’).
How it Works
Understanding jQuery’s precise notion of “visible” is crucial for proper usage. Any element that takes up space in the document layout is regarded as visible. This indicates that elements with particular CSS attributes or sizes are expressly not regarded as visible:
display: none: A CSS display attribute of none hides an element. This method is frequently used to totally obscure components from the layout.
width: 0 or height: 0:Elements with calculated height or width values of 0 pixels are likewise regarded as invisible. As a result, even if an element is technically “displayed,” jQuery will treat it as hidden by the :visible selector if it have no dimensions.
The difference from other concealment methods should be noted:
visibility: hidden:The :visible selector considers components with visibility: hidden visible since they take up page layout space even when their content is not rendered. They influence component placement since they take up space.
opacity: 0:In a same vein, the :visible selector likewise perceives elements with opacity: 0 as visible. They nevertheless occupy the designated space in the plan while being transparent.
A lot of jQuery functions and methods depend on whether an element is visible. The position() method, for instance, only functions properly with visible elements and determines an element’s location in relation to its offset parent. While several dimension-related methods, such as outerHeight() and outerWidth(), are mainly used for visible components, they can also be used in situations when elements are indirectly hidden because a parent is hidden. For example, scrollLeft() can be used on both visible and hidden items.
Code Example
Let’s look at a real-world example that shows how the :visible selector works with various hiding strategies to teach how to use it.
<!DOCTYPE html>
<html>
<head>
<title>:visible Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
.box { padding:10px; margin:5px; border:1px solid #333; }
.hidden-display { display:none; }
.hidden-dimensions { width:0; height:0; overflow:hidden; padding:0; margin:0; border:none; }
.hidden-visibility { visibility:hidden; }
.result { margin-top:10px; padding:10px; border:1px solid blue; }
</style>
</head>
<body>
<h3>:visible Selector</h3>
<div id="box1" class="box" style="background:lightgreen;">Box 1</div>
<div id="box2" class="box hidden-display" style="background:lightcoral;">Box 2</div>
<div id="box3" class="box hidden-dimensions" style="background:lightyellow;">Box 3</div>
<div id="box4" class="box hidden-visibility" style="background:lightblue;">Box 4</div>
<button id="checkBtn">Check</button>
<div class="result" id="output">Result here</div>
<script>
$('#checkBtn').click(() => {
let r = `<b>Visible boxes:</b> ${$('.box:visible').length}<ul>`;
for (let i = 1; i <= 4; i++)
r += `<li>Box ${i}: ${$(`#box${i}`).is(':visible')}</li>`;
r += `</ul>`;
$('#output').html(r);
});
</script>
</body>
</html>Output:
:visible Selector
Box 1
Check
Visible boxes: 3
• Box 1: true
• Box 2: false
• Box 3: true
• Box 4: trueIn this example:
- First, Box 1 is visible. Its dimensions and visible state vary dynamically when slideToggle() is invoked on it.
- Display: none is being used to hide Box 2. is(‘:visible’) for this box will return false in accordance with jQuery’s definition.
- Box 3 is 0 in height and 0 in breadth. This also prevents it from being visible to the :visible selector, therefore is(‘:visible’) will return false.
- Using visibility: hidden, Box 4 is concealed. This box still occupies document flow space, therefore is(‘:visible’) returns true. Visibility detection in jQuery doesn’t “see” elements.
When the DOM is prepared and the HTML document loaded, $(document).jQuery is executed by ready(). This avoids script errors when accessing non-DOM items. The is() method tests jQuery elements that match selectors like :visible. Attaching event handlers, such as a click event, to certain items is versatile and may be done with the on() method. The final pre-defined effect method, slideToggle(), smoothes the transition by animating an element’s height to reveal or conceal it. When the animation is finished, slideToggle() can be used to specify a callback function to run code.
When working with items that may be visibly hidden but still contribute to the document flow, developers can create more accurate and efficient code for dynamic web applications by being aware of the precise criteria jQuery employs for :visible.