jQuery CSS selector

Question

What I want:

Within $myElement find all elements with class .myClass and attribute display:none. Below is what I have tried, I've probably missed something stupid:

$myElement.find('.myClass[display=none]')

and

$myElement.find('.myClass').filter('[display=none]')

Answer 1

You can use the :hidden pseudo-selector:

$myElement.find('.myClass:hidden')

The syntax you proposed refers to the attributes of the element, not to the style definitions. In essence, your selector would have matched an element like so:

<div class="myClass" display="none">

Which doesn't really make much sense.

If you want to be explicit about display being "none" (as elements can be hidden in other ways also), you can use .filter():

$myElement.find('.myClass').filter(function() {
    return $(this).css('display') == 'none';
});

Answer 2

As far as I know there is no selector in jQuery to match rules in the CSS files. However, for this specific case, there is a :visible (which can be combined with :not). It will match all elements that are not visible, which could mean more than simply having display:none, but most probably it's what you are looking for.

See: http://api.jquery.com/visible-selector/

Answer 3

You can't use display since that is contained in style and is not an attribute selector. You can use jQuery's :visible pseudo-selector though:

$myElement.find('.myClass').not(":visible");

jQuery also has a :hidden pseudo-selector

$myElement.find('.myClass').filter(":hidden");

These are implemented by jQuery and not true CSS selectors, so it's best to use find and then filter the result afterwards so you can take advantage of any available querySelectorAll benefits