标签云

微信群

扫码加入我们

WeChat QR Code


It's worth mentioning (even after all this time), that $(element).is(":visible") works for jQuery 1.4.4, but not for jQuery 1.3.2, under Internet Explorer 8. This can be tested using Tsvetomir Tsonev's helpful test snippet. Just remember to change the version of jQuery, to test under each one.

2019年02月21日08分31秒

This is related although a different question: stackoverflow.com/questions/17425543/…

2019年02月22日08分31秒

What is your definition of hidden?

2019年02月22日08分31秒

This solution would seem to encourage the confustion of visible=false and display:none; whereas Mote's solution clearly illistrates the coders intent to check the display:none; (via mention of hide and show which control display:none not visible=true)

2019年02月22日08分31秒

That is correct, but :visible will also check if the parent elements are visible, as chiborg pointed out.

2019年02月22日08分31秒

You have a point - I'll make it clear that the code checks only for the display property. Given that the the original question is for show() and hide(), and they set display, my answer is correct. By the way it does work with IE7, here's a test snippet - jsfiddle.net/MWZss ;

2019年02月21日08分31秒

I actually found that the reverse logic words better: !$('selector').is(':hidden'); for some reason. Worth a try.

2019年02月22日08分31秒

Here's a simple benchmark testing is() against regexp:jsperf.com/jquery-is-vs-regexp-for-css-visibility. Conclusion: if you're out for performance, use regexp over is() (since is() looks for all hidden nodes first before looking at the actual element).

2019年02月22日08分31秒

just be careful, there are some good performance related tips in this presentation: addyosmani.com/jqprovenperformance

2019年02月22日08分31秒

On pages 21 to 28 it shows how slow :hidden or :visible is compared to other selectors. Thanks for pointing this.

2019年02月22日08分31秒

When you're dealing with a couple of elements and very little is going on - i.e. THE ABSURDLY VAST MAJORITY OF CASES - the time issue is a ridiculously minor concern. Oh, noes! It took 42 ms instead of 19 ms!!!

2019年02月22日08分31秒

I am toggling the element mamually using this selector. $('element:hidden') is always true for me!

2019年02月21日08分31秒

cwingrav You might want to re-read the documentation, :hidden applies to all elements. Form elements with type="hidden" is just one case that can trigger :hidden. Elements with no height and width, elements with display: none, and elements with hidden ancestors will also qualify as :hidden.

2019年02月22日08分31秒

This only checks for the display property of a single element. The :visible attribute checks also the visibility of the parent elements.

2019年02月22日08分31秒

This is the only solution that worked for me when testing with IE 8.

2019年02月22日08分31秒

This is not the solution to my problem but the method helped me identify a fix for checking against a property to my problem.

2019年02月22日08分31秒

chiborg Yes, but sometimes that's what you want and I had to learn the hard way how "clever" jQuery was...

2019年02月22日08分31秒

This does answer the question, being the question is about a single element and by using the hide(), show() and toggle() functions, however, as most have already said, we should use the :visible and :hidden pseudo-classes.

2019年02月22日08分31秒

This answer is good to handle visibility literally, but the question was How you would test if an element has been hidden or shown using jQuery?. Using jQuery means: the display property.

2019年02月22日08分31秒

Elements with visibility: hidden or opacity: 0 are considered to be visible, since they still consume space in the layout. See answer by Pedro Rainho and jQuery documentation on the :visible selector.

2019年02月21日08分31秒

you need to traverse up the DOM to check the node's parents, or else ,this is useless.

2019年02月21日08分31秒

this won't work if you hide element with .hide().

2019年02月22日08分31秒

wondering why no answer mentions the case when element is moved away from the visible window, like top:-1000px... Guess it's an edge-case

2019年02月22日08分31秒

No reason to extract the DOM node in the snippet used in the example, and then have to look it back up again. Better to just do: var $button = $('#btnUpdate'); And then in the If expressions just use $button instead of $(button). Has the advantage of caching the jQuery object.

2019年02月22日08分31秒

here's is a simple example jquerypot.com/…

2019年02月22日08分31秒

Another difference between visibility:hidden and opacity:0 is that the element will still respond to events (like clicks) with opacity:0. I learned that trick making a custom button for file uploads.

2019年02月22日08分31秒

also if you hide input with opacity:0, it still gets selected with tab key

2019年02月22日08分31秒

.hasClass('hide') doesn't check if an ancestor of the parent is hidden (which would make it hidden too). You could possibly get this to work correctly by checking if .closest('.hide').length > 0, but why reinvent the wheel?

2019年02月22日08分31秒

Variant you propose returns if element visible on html, my variant returns if element was directly hidden by your javascript code/view engine. If your know that parent elements should never be hidden - use .hasClass() to be more strict and prevent future bugs. If you want to check not only visibility but element state set too - use .hasClass() too. In other cases .closest() is better.

2019年02月21日08分31秒

Why dont you just use .is(":visible")?

2019年02月21日08分31秒

Works slightly differently to jQuery's; it considers visibility: hidden to be visible.

2019年02月21日08分31秒

It's easy enough to change the code above to mimic the (arguably stupid) jQuery behavior. . . . . function isRendered(o){if((o.nodeType!=1)||(o==document.body)){return true;}if(o.currentStyle&&o.currentStyle["display"]!="none"){return isRendered(o.parentNode);}else if(window.getComputedStyle){if(document.defaultView.getComputedStyle(o, null).getPropertyValue("display")!="none"){return isRendered(o.parentNode);}}return false;}

2019年02月21日08分31秒

Sure, I was just adding that for the benefit of users who used this without scanning its code. :)

2019年02月22日08分31秒

Adrew but this link is showing working example of this function. I think a practical answer may weight over a full page of text :)

2019年02月22日08分31秒

jolly.exe until that working example goes away that is.

2019年02月21日08分31秒

What language/dialect/library is this? I'm not familiar with this syntax in JS...

2019年02月22日08分31秒

It looks like a jasmine unit test.

2019年02月21日08分31秒

How did you determined that saving a selector in variable is really faster?

2019年02月21日08分31秒

Hi Ilia Rostovtsev jsperf.com/caching-jquery-selectors There you can run the test. Anyways it's nice to have it cached so it can be accessed faster

2019年02月21日08分31秒

This is suitable if you want to use a single variable through out the process instead of calling and calling the same object.

2019年02月22日08分31秒

Or, y'kno, just get rid of the entire conditional and say $('elementToToggle').toggle('slow');... :)

2019年02月21日08分31秒