CODEWITHSUNDEEP
jquerycsslisthtml-lists
Matt
Matt

Reputation: 1570

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:inline-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.

Upvotes: 0

Views: 193

Answers (4)

Jose Faeti
Jose Faeti

Reputation: 12302

$('#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.

Upvotes: 1

Markus Hedlund
Markus Hedlund

Reputation: 24254

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

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

Upvotes: 2

William Niu
William Niu

Reputation: 15853

$('#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

Upvotes: 0

Tim
Tim

Reputation: 9489

you can use jquery size

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

Upvotes: 0

Related Questions