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

Question

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.

Markus Hedlund · Accepted Answer · 2011-09-12 07:59:17Z

2

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

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

answered Sep 12, 2011 at 7:59

Markus Hedlund

24.4k22 gold badges82 silver badges113 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jose Faeti · Accepted Answer · 2011-09-12 08:00:17Z

1

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

answered Sep 12, 2011 at 8:00

Jose Faeti

12.3k6 gold badges40 silver badges53 bronze badges

1 Comment

Jose Faeti Over a year ago

You're welcome. Study both jQuery selectors and (more generally) regular expressions. You will get an increase in productivity and faster code.

Tim · Accepted Answer · 2011-09-12 07:56:25Z

0

you can use jquery size

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

answered Sep 12, 2011 at 7:56

Tim

9,5191 gold badge34 silver badges48 bronze badges

1 Comment

Markus Hedlund Over a year ago

"The .size() method is functionally equivalent to the .length property; however, the .length property is preferred because it does not have the overhead of a function call."

William Niu · Accepted Answer · 2011-09-12 07:56:37Z

0

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

answered Sep 12, 2011 at 7:56

William Niu

15.9k8 gold badges58 silver badges93 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related