Get the count of Divs from their style property in jquery

Question

Hello I am trying to the get the count of div which has style display block.

<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

jQuery -

$(document).ready(function(){
    $(".wrapper").each(function(){
        var wrapLength = $('.sub').length;
        $(".sub").each(function(){
            if($(".sub").css("display","none")){
                wrapLength = wrapLength - 1;
            }
        }); 
        alert(wrapLength);
    }); 
});

Now I am getting the count as 0 but I should get the count as 2. Please help.

Possible duplicate of [Jquery - How to get the style display attribute "none / block"](https://stackoverflow.com/questions/1875403/jquery-how-to-get-the-style-display-attribute-none-block) — i alarmed alien, Jul 27 '18 at 10:03

score 2 · Accepted Answer · answered Jul 27 '18 at 10:04

You can use jQuery .filter() method combined with Javascript style property for that :

let shownSubs = $('.sub').filter((_,e) => e.style.display == 'block');
console.log(shownSubs.length);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

Albert Einstein · Answer 2 · 2018-07-27T10:18:45.633

You can simply do $('.sub:hidden').length to get display:none and $('.sub:visible').length; element count.

$(document).ready(function(){
    $(".wrapper").each(function(){
        var wrapLength = $('.sub:hidden').length;
        console.log(`Hidden count: ${wrapLength}`);
        var visibleLength = $('.sub:visible').length;
        console.log(`Visible count: ${visibleLength}`)
    }); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

score 0 · Answer 3 · answered Jul 27 '18 at 10:07

$(document).ready(function() {
            var count_none = 0;
            $(".sub").each(function() {
                    var style_el = $(this).attr('style');
                    if (style_el == 'display:none') {
                        count_none++;
                    }
                });
                console.log(count_none);
            });

score 0 · Answer 4 · answered Jul 27 '18 at 10:12

$(function(){
var count=0;
$(".sub").each(function(){
if($(this).css("display")=='block'){
count++;
}
})
alert("total display blocked items :"+count);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
  <div class="sub" style="display:block">text</div>
  <div class="sub" style="display:none">text</div>
</div>

hope this solves your query.

Get the count of Divs from their style property in jquery

4 Answers4