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

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

您可以使用筛选功能筛选出显示属性设置为 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;

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

Count hidden elements regardless of parent visibility

javascript

jquery

hidden

DEMO