计算隐藏元素，而不考虑父可见性

Question

不管父可见性如何，我都需要计算隐藏的元素。

我有这样的代码：

<div id="parent-1">    
    <div class="item" style="display: none;"></div>
    <div class="item" style="display: none;"></div>
    <div class="item"></div>
    <div class="item" style="display: none;"></div>
</div>

<script>
   var hidden_items = $('#parent-1').find('.item:hidden').length;
   console.log (hidden_items);
</script>   

在本例中，我获得了3项，因此是正确的。

但是有了这个代码：

<div id="parent-2" style="display: none;">    
    <div class="item" style="display: none;">
    <div class="item" style="display: none;">
    <div class="item">
    <div class="item" style="display: none;">
</div>

<script>
   var hidden_items = $('#parent-2').find('.item:hidden').length;
   console.log (hidden_items);
</script>   

我得到了4元素！因为父母是一个隐藏的元素，但我需要得到3。

有什么想法吗？

Answer 1

可以使用filter函数筛选出将display属性设置为none的元素：

var hidden_items = $('#parent-2 .item').filter(function(){
 return $(this).css('display') == "none"
}).length;

工作片段：

​

$(function(){
var hidden_items = $('#parent-2 .item').filter(function(){
 return $(this).css('display') == "none"
 
 }).length;
 alert (hidden_items);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="parent-2" style="display: none;">    
    <div class="item" style="display: none;">
    <div class="item" style="display: none;">
    <div class="item">
    <div class="item" style="display: none;">
</div>

​

Answer 2

这是因为，当父元素被隐藏时，其子元素也将被隐藏。这是自然的行为。如果您仍然希望获取元素，而不管其父显示属性如何，那么使用.filter及其callBack函数。

var hidden_items = $('#parent-2 .item').filter(function(){
 return this.style.display == "none"
}).length;

演示