jQuery/CSS - How do I find the quantity of specifically CSS-styled elements?

I need to find the QUANTITY of all of the instances of ONLY the <li style="display:none;"> UNDER ONLY the <ul id="bob">, as I will have other <li> pieces throughout document:

e.g.:

<ul>
  <li> a </li>
  <li> b </li>
  <li> c </li>
</ul>

<ul id="bob">
  <li style="display:none;"> 1 </li>
  <li style="display:none;"> 2 </li>
  <li style="display:none;"> 3 </li>
  <li style="display:inline-block;"> 4 </li>
  <li style="display:开发者_StackOverflowinline-block;"> 5 </li>
  <li style="display:inline-block;"> 6 </li>
</ul>

The amount of <li> are dynamically generated in my script, so it's not an obvious, visible number like '3' in this case.

Using jQuery's :hidden should work in this case.

alert( $("#bob li:hidden").length );

$('#bob li[style*="display:none"]')

This will find all your li elements inside #bob, with a style attribute containing the word "display:none".

var elements = $('#bob li[style*="display:none"]');

elements.length;

This will give you the number of elements found.

You can see this fiddle here.

you can use jquery size

$("#bob li").is(':hidden').size()

$('#bob > li:hidden').length should do.

Relevant links:

• :hidden selector
• .size():

  the .length property is preferred because it does not have the overhead of a function call