What if the element exists in the DOM
That was described in my recent post and it describes the case when you have a particular element in the DOM tree, or if that element does not exists.
example:
<div id="holder"> <div id="element_id">Hello World!</div> </div>
console.log( $('#element_id').length )
this prints 1, because the element exists. In the following example is different.
example:
<div id="holder"> </div>
console.log( $('#element_id').length )
that returns 0, because obviously the element does not exists.
So far so good, but what if the element exists and it’s not visible
Well than the HTML look like that:
example:
<div id="holder"> <div id="element_id" style="display:none"> Hello World! </div> </div>
The solution is a bit different, but simple
jQuery code:
if ($('#element_id:visible').length > 0) console.log('the element is visible'); else console.log('the element is not visible');
Related posts:
- jquery check for element existence in the DOM
- Toggle the visibility with jQuery
- cancel bubbling on element click with jQuery
Hi Good day,
Thanks! this was really helpful & simple to integrate. Thanks, keep up the good work!
Fantastic code in just two lines !!! Great job
Nice example works perfectly
for the visibility check you can use this:
Following have some options for check visibility.
Check if an element is hidden
Looping though visible elements
abc
def
ghi
To loop through the visible divs under #foo do something do this:
The above example would write the following out to the document:
abc
ghi
Cheerssss !
indeed