jQuery count div that has display:block

Question

I have div elements as shown in image below. I want count of divs that has css display as block.

What I tried:

1) $('div.price_listing_container:visible').length

and

2.)

  $('#content').children("div").filter(function() {
        return $(this).css('display') !== 'none';
  }).length

and

3.) $("#content > div").filter(":block").size()

Last option didn't worked at all, other two work in alert but if I assign their returned value to a variable the value comes 0, not sure why is it so, See the code below:

var numberOfResultsVisible =  ($('#content').children("div").filter(function() {
                return $(this).css('display') !== 'none';
            }).length);

and

var numberOfResultsVisible =  $('div.price_listing_container:visible').length;

After assignment value comes 0.

Can you please tell if I can use some other method to get the count.

Answer 1

how about a simple loop?

$(function(){
    var allElems = document.getElementsByTagName('div');
    var count = 0;
    for (var i = 0; i < allElems.length; i++)
    {
        var thisElem = allElems[i];
        if (thisElem.style.display == 'block') count++;
    }
    alert(count);
});

Same here: http://jsfiddle.net/E252r/8/