javascript - 无论父级可见性如何计算隐藏元素

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 个元素!因为 parent 是一个隐藏元素，但我需要得到 3。

有什么想法吗？

Answer 1

您可以使用过滤功能过滤掉显示属性设置为无的元素:

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>