To check if an element is hidden in jQuery, you can use the is
function and pass it the :hidden
selector. The :hidden
selector matches elements that are not visible, either because they have a display
value of none
, or because they are placed outside of the visible area of the document (e.g., using a negative left
or top
value).
Here is an example of how to use the :hidden
selector to check if an element is hidden:
if ($('#my-element').is(':hidden')) {
console.log('Element is hidden');
} else {
console.log('Element is visible');
}
You can also use the is
function to check if an element is visible by using the :visible
selector, which matches elements that are visible on the page.
if ($('#my-element').is(':visible')) {
console.log('Element is visible');
} else {
console.log('Element is hidden');
}
Note that an element may be hidden due to its parent element being hidden, even if the element itself has a display
value of block
or inline
. In this case, you can use the parents
function to check if any of the element’s ancestors are hidden.
if ($('#my-element').parents(':hidden').length > 0) {
console.log('Element is hidden');
} else {
console.log('Element is visible');
}