PrototypeJS: select visible elements

Question

I am trying to formulate a selector to select a set of visible elements. Our application uses the JavaScript prototype script, 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 hidden ones contain the string "display: none;". I need to select elements <li>that are visible, where visibility is defined as "contains no display: no."

What I tried 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 would like it to be as compact as possible, but I will take what I can get.

, , jQuery , , .

Answer 1

findAll:

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