PrototypeJS: Selecting visible elements

Question

I am trying to formulate a selector to select a set of visible elements. Our application uses the Prototype JavaScript framework, version 1.6.0.3.

The markup I'm working with is as follows:

<ul>
 <li style="display:none;">1 Hidden</li>
 <li style="display:none;">2 Hidden</li>
 <li style="">3 Visible</li>
 <li style="display:none;">4 Hidden</li>
 <li style="display:none;">5 Hidden</li>
 <li style="display:none;">6 Hidden</li>
 <li>7 Visible</li>
 <li style="">8 Visible</li>
</ul>

As you can see, some elements may have a style attribute, but only the hidden ones contain the string "display:none;". I need to select the <li> elements that are visible, where visibility is defined as "does not contain display:none".

What I've tried to far:

var visibleItems = $$('li[style*="display:none"]'); // Yields: [ ]
var visibleItems = $$('li[style*="display"]'); // Yields: [li, li, li, li, li], but isn't specific enough

Ideas? Ideally I'd like this to be as compact as possible, but I'll take what I can get.

Yes, I know that jQuery can do this but I do not want to introduce another framework in to this application since much of it already depends on Prototype.

Answer 1

You can filter the items using the findAll function:

var notVisible = $$('li').findAll(function(el) { return !el.visible(); });