Geek Answers Handbook

How to choose CSS styles in jQuery?

I am trying to find all parent elements that have CSS display:none style. However, I cannot get it to work. Here is what I have:

 var $parents = $(...).parents("[css=display:none]");
+7
jquery css jquery-selectors
source share
4 answers

If you want the ones that are actually display: none; (may not be contained in another display: none; ), you can use .filter() and .css() to get these parents, for example:

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

This gets the parents and then filters them to get only those that are display: none; for this particular parent.

+14
source share

@Nick solution is a very simple and easy way to achieve your goal. It is also probably the most effective method. However, for completeness and convenience (if you do this a lot), you can also create your own selector:

 $.expr[':'].css = function(obj, index, meta, stack) { var args = meta[3].split(/\s*=\s*/); return $(obj).css(args[0]) == args[1]; } // Then we can use our custom selector, like so: $("#myElement").parents(":css(display=none)").show();

An example is http://jsfiddle.net/V8CQr/ .

Additional information on creating custom selectors can be found at:

http://www.jameswiseman.com/blog/2010/04/19/creating-a-jquery-custom-selector/

+6
source share
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $('a').parents('div[style*="display: none"], [style*="display:none"]').show(); }); </script> </head> <body> <div class="Test" style="color: Red; display: none;"> aaa <a href="#test">test</a><br /> </div> <div class="Test" style="color: Aqua;"> bbb <a href="#test">test</a><br /> </div> <div class="Test" style="font-size: 15px; display: none;"> ccc <a href="#test">test</a><br /> </div> </body> </html>
+1
source share

You were close:

 $(...).parents('[style*="display: none"]');

Note: this is a substring search by element attribute values, therefore it is not as good as the $(this).css(...) filter shown above.

docs .

+1
source share

More articles:


All Articles