jquery select visible without using :visible

Question

from jquery docs an element is hidden when : An ancestor element is hidden, so the element is not shown on the page.

I have a hidden div and inside paragraphs that can be either hidden or visible

<div id="wrapper"> <-- this is hidden -->
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
    <p class="myclass" style=">display:none">text</p> 
    <p class="myclass">text</p> 
</div>

So any selection $(".myclass:visible") fails because wrapper is hidden

Is there any other way to check if are visible elements inside wrapper and count them.

For example check if element has class myclass and css display:none is one solution i guess but any tries from me are failed.

Any help appreciated

Answer 1

The only way I see is to add a custom class that hides elements (instead of inline style):

.hidden {
    display: none;
}

<div id="wrapper"> <-- this is hidden -->
    <p class="myclass hidden"text</p> 
    <p class="myclass" >text</p> 
    <p class="myclass hidden">text</p> 
    <p class="myclass" >text</p> 
</div>

Then you can count the "visible" ones with $('.myclass:not(.hidden)').length.

---

Update:

If you actually only have to find the elements which display property is not none, .filter() could do the job:

var count = $('.myclass').filter(function() {
    return this.style.display !== "none";    
}).length;

Of course this won't work if some elements have display:none set by you and not by the UI tabs plugin. But it might be sufficient in your situation.