Need to use jQuery.find to find element with specific style

Right... I need to find all < ul style="display: block;"> elements, so that I can set it do display:none.

I think I'm on the right path here... but not quite there:

jQuery('#adminMenu li').find("ul").css('display');

For advance users: how can I find and change the style with one line?

13.10.2009 20:06:24
7 ОТВЕТОВ
РЕШЕНИЕ

That's tricky as stated but is solvable other ways. The easiest is:

$("#adminMenu li ul:visible").hide();

assuming items are either hidden or not. Of course, considering you want to hide them all why not just:

$("#adminMenu li ul").hide();

Try and avoid changing CSS style directly. It's problematic. It's hard to reverse and as you're discovering hard to search for. Use a class instead:

#adminMenu li ul { display: none; }
ul.block { display: block; }

with:

$("#adminMenu li ul").removeClass("block");

or

$("#adminMenu li ul.block").removeClass("block");
26
13.10.2009 20:09:25
$('#adminMenu li').find("ul:visible").css('display', 'none');

or

$('#adminMenu li').find("ul:visible").hide();

or

$('#adminMenu li ul:visible').hide();

to name a few ways

0
13.10.2009 20:08:37

You coud use the fadeOut() or slideUp() methods for a visual effect:

jQuery('#adminMenu li').find("ul").fadeOut('fast');

jQuery('#adminMenu li').find("ul").slideUp('fast');
0
13.10.2009 20:10:33
$('#adminMenu li ul').hide();
0
13.10.2009 20:20:09
Thanks, but I think I have the wrong answer, it is more this one: stackoverflow.com/questions/1562634/…
powtac 13.10.2009 20:21:03

Don't know how to do it in one line, but here's how you can do it in a couple more:

jQuery('#adminMenu li').find("ul").each(function (){
  if($(this).css("display") == "block"){
    // do something
  }
});

If what you want is to handle all visible elements (instead of only the display: block ones), you could try the :visible selector instead.

0
13.10.2009 20:10:47

You may be able to use the attribute selectors, and the 'contains' option

$('#adminMenu li ul[style*="display:block"]').hide()

This essentially says 'any ul who's style attribute contains the text display:block'

23
15.02.2014 21:20:48
For me (in jQuery-1.9.0) this gives Syntax error, unrecognized expression: ul[style*=display:block]
Steve Chambers 14.02.2014 15:32:58
Edited to include the missing quotes
Corey Downie 15.02.2014 21:21:10
This is a good idea to use that wildcard selector. I wonder if it's faster than the other suggestions. OP: you may want to consider a broader target though. For example, if there was, for whatever reason, a perfectly valid space between display: block this would not work. But this would [style*="block"] assuming it's not too broad for your purpose.
dhaupin 2.06.2016 20:13:12
for me its working when I added space between display: and block - for example $('#adminMenu li ul[style*="display: block"]').hide() jquery - 3.3.1
szkut 31.12.2018 06:00:32

You can use filter. (http://api.jquery.com/filter/)

So you can do as below.

$('ul').filter(function() {
    return $(this).css('display') == 'block';
});
7
11.04.2014 11:27:19