Question

I have a list where elements are hidden for multiple reasons, each corresponding to a css class i.e:

<style>
    .filteredOut { display: none; }
    .somethingElse { display : none; }
    ...
</style>

I want to apply alternating css classes via .filter(':even').addClass('even') but only to classes that are visible. The problem is that the parent is hidden when this happens so .filter(':visible') returns 0 elements. I need something like .filter(':visibileEventIfParentIsNot')

Further more, I’d rather not have to call a function with this in it every time I call a function that changes what’s visible in a list. This may be a pipe dream, but is there a way to do this ala live() or something similar? I’m open to off the wall ideas.

Answer 1

For .filter(':visibileEventIfParentIsNot') you can write your own filter function, like this:

.filter(function() {
   return $(this).css("display") != 'none';
})

Note this doesn’t cover visibility, just the traditional jQuery cases like .hide(), which effectively is the same as .css('display', 'none').

But if you’re doing alternating row styles and all the sudden showed an odd number of elements, this wouldn’t look right, I think you’re better off doing the .filter(':even') application when the visibility of something changes (maybe the .resize() event with .resize() plugin?).