计算具有特定属性的子项数

Question

我想知道如何使用属性style='display:none;'计算div元素的数量。正如您从下面的代码中看到的那样

<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>

我们有3个这样的div元素。我想计算具有该属性的类parent-class的父级上有多少div元素。任何帮助将不胜感激。

Answer 1

参考： - :hidden

如下所示： -

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

工作代码段： -

＆＃13;

＆＃13;

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

  

我想知道如何计算div元素的数量   属性style ='display：none;'

使用filter

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

<强>演示

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>

修改

如果你想检查隐藏的元素（与检查哪个元素显示不同：无），请检查此演示以查看差异。

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>

Answer 3

您可以使用$('div:hidden').length或$('.line-content:hidden').length

Answer 4

您可以使用简单的jQuery：

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

Answer 5

您可以使用此代码

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

Answer 6

＆＃13;

＆＃13;

var len = $('div[style]').length;
console.log(len);

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 7

您可以使用：     jQuery（'parent-class＆gt; div [style * =“display：none”]'）。length;