CODEWITHSUNDEEP
javascriptjqueryhtml
Jon Mateo
Jon Mateo

Reputation: 384

Count the number of children which have a specific attribute

I would like to know how to count the number of div elements with the attribute style='display:none;'. As you can see from the code below

<div class="parent-class">
 <div id="child1" class="line-content"> TEST1 </div>

 <div id="child2" class="line-content"> TEST2 </div>

 <div id="child3" class="line-content"> TEST3 </div>

 <div id="child4" class="line-content" style="display:none;"> TEST4 </div>

 <div id="child5" class="line-content" style="display:none;"> TEST5 </div>

 <div id="child6" class="line-content" style="display:none;"> TEST6 </div>
</div>

we have 3 such div elements. I would like to count how many div elements on the parent with class parent-class with that attribute. Any help would be greatly appreciated.

Upvotes: 1

Views: 260

Answers (7)

Death-is-the-real-truth
Death-is-the-real-truth

Reputation: 72299

Reference:- :hidden

Do like below:-

console.log($('.line-content:hidden').length);

Working snippet:-

console.log($('.line-content:hidden').length);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-class">
 <div id="child1" class="line-content"> TEST1 </div>

 <div id="child2" class="line-content"> TEST2 </div>

 <div id="child3" class="line-content"> TEST3 </div>

 <div id="child4" class="line-content" style="display:none;"> TEST4 </div>

 <div id="child5" class="line-content" style="display:none;"> TEST5 </div>

 <div id="child6" class="line-content" style="display:none;"> TEST6 </div>
</div>

Upvotes: 4

vicky patel
vicky patel

Reputation: 705

var len = $('div[style]').length;
console.log(len);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-class">
 <div id="child1" class="line-content"> TEST1 </div>

 <div id="child2" class="line-content"> TEST2 </div>

 <div id="child3" class="line-content"> TEST3 </div>

 <div id="child4" class="line-content" style="display:none;"> TEST4 </div>

 <div id="child5" class="line-content" style="display:none;"> TEST5 </div>

 <div id="child6" class="line-content" style="display:none;"> TEST6 </div>
</div>

Upvotes: 0

gurvinder372
gurvinder372

Reputation: 68393

I would like to know how to count the number of div element who has the attribute style='display:none;'

Use filter

$( "div.parent-class > div" ).filter( function( i,v ){ 
   return v.style.display == "none"; 
}).length;

Demo

var output = $( "div.parent-class > div" ).filter( function( i,v ){ 
   return v.style.display == "none"; 
}).length;

console.log( output );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-class">
  <div id="child1" class="line-content"> TEST1 </div>

  <div id="child2" class="line-content"> TEST2 </div>

  <div id="child3" class="line-content"> TEST3 </div>

  <div id="child4" class="line-content" style="display:none;"> TEST4 </div>

  <div id="child5" class="line-content" style="display:none;"> TEST5 </div>

  <div id="child6" class="line-content" style="display:none;"> TEST6 </div>
</div>

Edit

If you want to check the hidden elements (different from checking which element has display:none), then check this demo to see the difference.

var output = $( "div" ).filter( function( i,v ){ 
   return v.style.display == "none"; 
}).length;

console.log( "output with filter - " + output );

var output = $( "div:hidden" ).length;

console.log( "output with hidden - " + output );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent-class">
  <div id="child1" class="line-content"> TEST1 </div>
  <div id="child2" class="line-content"> TEST2 </div>
  <div id="child3" class="line-content"> TEST3 </div>
  <div id="child4" class="line-content" style="display:none;"> TEST4 </div>
  <div id="child5" class="line-content" style="display:none;"> 
    TEST5 
    <div  style="display:none;">
        
    </div>
  </div>
  <div id="child6" class="line-content" style="display:none;"> 
      TEST5 
    <div>        
    </div>

  </div>
</div>

Upvotes: 3

Abhilash Ravindran C K
Abhilash Ravindran C K

Reputation: 1856

You can use this code,

var count = $('div.parent-class > div:hidden').length;
alert(count);

Upvotes: 0

Rahul Mukherjee
Rahul Mukherjee

Reputation: 141

You may use: jQuery('parent-class > div[style*="display: none"]').length;

Upvotes: -1

Sandip
Sandip

Reputation: 262

You can use simple jQuery for this :

$(".parent-class > div:hidden").length;

Upvotes: 0

Lumaskcete
Lumaskcete

Reputation: 710

you can use $('div:hidden').length or $('.line-content:hidden').length

Upvotes: 0

Related Questions