JQuery search element with class and style mapping: block

Question

I am retrieving the number of elements found (these elements have a .highlight class) using this simple jQuery snippet:

 $(".highlight").length 

But now my problem is that some elements are hidden through style="display: none;"

Now, how can I count the number of elements and display?

Something like:

 $(hasClass 'highlight' AND has style 'display: block'). length ? 

Answer 1

You can use : visible to get the visible element.

 $(".highlight:visible").length 

Answer 2

One way is to use the pseudo-selector :visible jQuery mentioned in Adil.

A common mistake is that if an element with the .highlight class .highlight nested in a container that is hidden, you cannot get it, although this element has display: block

Instead, you can use css regex as follows: $('.highlight[style*="display: block"]')

A common mistake is that you need to know exactly how the rule is written. If there is no space before block : display:block instead of display: block , you also cannot get the element.

To overcome this, you need only look for the block expression in the following styles: $('.highlight[style*="block"]')

Answer 3

U can also use css to see that the element has css display="none" or display="block"

  $(".highlight").each(function(){ if($(this).css("display")=="block"){ //Your code here } });