How to check visibility of multiple div's in simpler way?

Question

Currently i'm using below code which works well.

$("#topperAtBaseLevel:visible, #lowerAtBaseLevel:visible, #midAtBaseLevel").hide();

any optimised code? (i cant use same class) i mean how to use :visible rightly?

Answer 1

That code seems perfect; you are using :visible correctly.

You can take a look at the jQuery :visible selector help page if you want to know exactly how it works, but in a few words it selects visible elements =)

Answer 2

That is the way to achieve what you're going for. You are using the selectors correctly and efficiently.

You could make it a little faster if you maintained an array of the ID's of the tags that need to be hidden, and then construct your selector dynamically to find by ID. (This would be faster even though the selector might be longer. Selecting by ID is very fast.)

But, the optimization is not needed, is it? We're talking about going from lightening fast to double lightening fast. A super-duper jQuery pro would just do what you've done.

Answer 3

Well, all I can think of, is:

$('[id$="AtBaseLevel"]:visible').hide();

That would match any element whose ID ends in AtBaseLevel. Mind you, shorter does not mean faster, since ID lookups are about as fast as it gets. Attribute-based selectors are not that optimised.

Answer 4

You can do it like this:

$("#topperAtBaseLevel, #lowerAtBaseLevel, #midAtBaseLevel").filter(":visible").hide();

However, this results in everything being hidden, calling .hide() on a hidden element is fine, nothing wrong there, so it could just be this:

$("#topperAtBaseLevel, #lowerAtBaseLevel, #midAtBaseLevel").hide();